Google Chrome开发插件，在特定网页执行js脚本

最新推荐文章于 2022-09-27 17:53:42 发布

原创最新推荐文章于 2022-09-27 17:53:42 发布 · 5.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用Google Chrome浏览器的插件功能，实现特定网页中执行自定义JS脚本的方法。通过创建配置文件manifest.json和指定的JS脚本文件，可以在打开特定网址时自动执行预设的脚本。

Google Chrome开发插件，在特定网页执行js脚本

当想在某些网页网页之中执行自己写的js脚本文件，而又无法直接嵌入别人的源码之中怎么办？可以利用Chrome的插件功能，自己开发配置一款插件，使其浏览器每次打开特定页面时，执行特定的js脚本。具体步骤如下：
1.创建一个新的文件夹
在这里插入图片描述
2.在文件夹中创建配置文件，名称固定为：manifest.json
可以利用记事本创建，后缀名改为.json,文件内容如下：

{
“name”: “punchtheclock”,
“manifest_version”: 2,
“version”: “1.0”,
“description”: “punchtheclock”,
“browser_action”: {
“default_icon”: “m.jpg”
},
“permissions”: [
“tabs”, “http:///”,“https:///”
],
“content_scripts”: [
{
“matches”: [“http://login.cuit.edu.cn/Login/xLogin/Login.asp”],
“js”: [“punchtheclock.js”]
}
]
}

字段解释：
manifes_version：声明是我们使用的版本。

name和description：分别代表我们插件的名称和描述，version则是插件本身的版本号，这些是用来向用户展示所安装的插件的相关信息。

permissions：是插件使用的权限，tabs允许使用chrome.tabs和chrome.windows的api，后面则是匹配模式，指可以和该模式的网站运行的代码进行交互。

Content scripts：是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。其中js指的是要注入的脚本，marches定义了在哪些页面注入Content scripts。

3.在该文件夹下创建好对应的资源文件：这里是需要执行的脚本文件：punchtheclock.js和m.jpg
在这里插入图片描述
4.打开Chrome浏览器扩展程序面板，选择开发者模式，点击：加载已解压扩展程序，选择创建的文件夹，确定，至此扩展程序就创建好了，当打开对应网页时就会执行自己写的这个js文件