需求
在工作中,如果我们需要修改别人网页的内容,因为我们没有别人的代码,所以我们不能靠修改源代码的方式解决。但是谷歌浏览器提供了插件功能,我们可以自己编写插件实现浏览指定网页,修改网页的内容。
步骤
- 在桌面创建一个文件夹,命名demo
- 在demo文件夹下创建一个文件夹,命名content
- 然后再content文件夹下创建一个js文件夹和一个manifest.json文件。
- 最后在js文件夹下创建一个index.js文件,最终目录格式如下
示例
举例修改百度首页中,“百度热榜”四个字的颜色,如下
- 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
- 在index.js中操作DOM元素,修改百度热门颜色。
var content = document.getElementsByClassName("title-text");
content[0].style.color='blue';
3. 安装插件
打开谷歌浏览器,找到更多工具->扩展程序
然后,点击“打包扩展程序”按钮
选择content文件夹,点击打包开始
此时在demo文件夹下生成两个文件。如果需要重新打包,则需要先删除这两个文件。
最后,安装打包的插件
选择“加载已解压的扩展程序”
选择content文件夹,插件就安装成功了。
验证
打开百度首页可看到文字颜色变成蓝色。