[Tools] Create a Chrome Extension

本教程介绍如何创建一个简单的Chrome扩展,通过修改manifest.json文件并使用inject.js脚本来覆盖Twitter和Reddit页面的内容,显示BacktoWork!!信息,帮助用户减少社交媒体干扰。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Creating a Chrome extension requires a manifest.json file which defines how your extension will behave. With a minimal setup, you can already manipulate pages and change elements. This lesson walks you through creating a manifest.json file which will essentially "block" twitter and reddit and tell you to get back to work.

 

manifest.json:

{
    "name": "Back to Work!!",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["inject.js"],
        "matches": [
            "https://twitter.com/*",
            "https://*.reddit.com/*"
        ]
    }]
 }

 

inject.js:

document.body.innerHTML = `
  Back to Work!!
`

 

Go to chrome://extensions .

 

Click "Load unpacked" folder.

 

Then when you visit twitter, it will show "Back to Work!!" in html.

转载于:https://www.cnblogs.com/Answer1215/p/9656531.html

<think>嗯,用户这次的问题很明确:想要下载React Developer Tools 6.1.5版本。从历史引用来看,用户似乎正在搭建React开发环境,之前已经接触过create-react-app和基础配置,现在需要特定版本的调试工具。 用户特意强调版本号6.1.5,说明可能有兼容性需求。考虑到React生态的版本依赖特性,这个需求很合理——可能是项目依赖的React版本较旧,或者团队规范要求。不过直接下载旧版扩展确实存在困难,因为浏览器商店通常只提供最新版。 注意到用户引用了Chrome商店和Firefox商店的链接,但这两个渠道都只能安装最新版。需要帮用户寻找替代方案。GitHub的Releases页面是最可靠的途径,React团队确实会归档历史版本。另外,用户可能是开发者,应该具备从源码构建的能力,所以提供两种方案比较合适。 用户情绪可能有些着急,因为调试工具是开发必需品。回复要给出明确的操作路径,避免让用户在不同方案间犹豫。重点突出GitHub下载链接,这是最快捷的方式;构建方案作为备选,但需要说明技术门槛。 安全提醒必不可少,用户下载第三方构建包时容易忽略验证环节。得强调校验哈希值的重要性,毕竟浏览器扩展有安全风险。 最后补充版本兼容性说明是必要的,避免用户安装后出现不匹配的情况。如果用户之后遇到问题,可能会追问具体版本对应关系,不过当前回复已经包含React 17的提示,应该足够。</think>要下载 React Developer Tools 6.1.5 版本,由于浏览器扩展商店通常只提供最新版,获取特定历史版本需要通过其他途径。以下是两种可靠方法: --- ### 方法一:从 GitHub Releases 下载(推荐) 1. 访问 React Developer Tools 的 GitHub Releases 页面: [https://github.com/facebook/react/releases/tag/v6.1.5](https://github.com/facebook/react/releases/tag/v6.1.5) *这是官方发布的归档版本[^1]。* 2. 在 **Assets** 区域下载对应浏览器的压缩包: - Chrome/Edge:选择 `react-devtools-6.1.5.zip` - Firefox:选择 `react-devtools-6.1.5.xpi` 3. **手动安装扩展**: - **Chrome/Edge**: 1. 解压下载的 ZIP 文件 2. 打开浏览器,进入 `chrome://extensions` 3. 开启 **开发者模式** 4. 点击 **加载已解压的扩展程序**,选择解压后的文件夹 - **Firefox**: 1. 打开 `about:debugging#/runtime/this-firefox` 2. 点击 **临时加载扩展程序** 3. 选择下载的 `.xpi` 文件 --- ### 方法二:通过 npm 构建(需开发环境) 1. 克隆仓库并切换版本: ```bash git clone https://github.com/facebook/react.git cd react git checkout v6.1.5 ``` 2. 构建扩展包: ```bash cd packages/react-devtools-extensions npm install npm run build:extension ``` 3. 构建后的文件在 `packages/react-devtools-extensions/chrome/build/unpacked`(Chrome)或 `firefox` 目录(Firefox),按方法一的步骤手动加载。 --- ### ⚠️ 注意事项 1. **版本兼容性**: 此版本适用于 React 17 应用,新版 React 可能功能受限[^1]。 2. **安全验证**: 非商店安装时浏览器会提示风险,需手动确认信任。 3. **更新限制**: 手动安装的扩展不会自动更新,需定期检查 GitHub 版本。 > 建议优先使用最新版([Chrome 商店](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) / [Firefox 商店](https://addons.mozilla.org/firefox/addon/react-devtools/)),除非项目有特定兼容需求。 --- ### 相关问题 1. 如何解决 React Developer Tools 不显示组件的问题? 2. 旧版 React 应用应该使用哪个版本的开发工具? 3. 手动安装浏览器扩展有哪些安全风险? 4. React Developer Tools 有哪些核心调试功能? [^1]: React Developer Tools 的版本通常与 React 主版本关联,v6.x 主要支持 React 17,新版 React 需使用更高版本工具。 [^2]: 浏览器扩展商店策略限制历史版本下载,需通过源码或第三方存档获取。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值