用js写谷歌浏览器插件

需求

在工作中，如果我们需要修改别人网页的内容，因为我们没有别人的代码，所以我们不能靠修改源代码的方式解决。但是谷歌浏览器提供了插件功能，我们可以自己编写插件实现浏览指定网页，修改网页的内容。

步骤

1. 在桌面创建一个文件夹，命名demo
2. 在demo文件夹下创建一个文件夹，命名content
3. 然后再content文件夹下创建一个js文件夹和一个manifest.json文件。
4. 最后在js文件夹下创建一个index.js文件，最终目录格式如下
   

示例

举例修改百度首页中，“百度热榜”四个字的颜色，如下

1. manifest.json文件配置插件适用的网页，也就是指定域名。

{
    "manifest_version": 2,
    "name": "anything",
    "version": "1.0",
    "description": "anything",
    "content_scripts": [
        {
            "matches": ["*://baidu.com/*"],
            "js": ["js/index.js"]
        }
    ]
}

matches：指定插件在哪些域名下生效。
js:引入index.js

1. 在index.js中操作DOM元素，修改百度热门颜色。

    var content = document.getElementsByClassName("title-text");
	content[0].style.color='blue';

3. 安装插件

打开谷歌浏览器，找到更多工具->扩展程序

然后，点击“打包扩展程序”按钮

选择content文件夹，点击打包开始

此时在demo文件夹下生成两个文件。如果需要重新打包，则需要先删除这两个文件。

最后，安装打包的插件
选择“加载已解压的扩展程序”

选择content文件夹，插件就安装成功了。

验证

打开百度首页可看到文字颜色变成蓝色。