chrome扩展程序开发之在目标页面运行自己的JS

原文地址:https://qdgithub.com/home/index/article/aid/247.html

chrome 插件开发的入门介绍,实现利用 chrome 扩展实现在目标网页运行我们的 js 的功能。关于 chrome 扩展的详细内容,可以通过官网了解。

开发工具很简单,记事本就 OK 了,当然还要有一个 chrome 浏览器。

新建一个文件夹,比如,HelloWorld

然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是 manifest.json,注意扩展名是 json,然后输入如下内容。

json 复制代码
{ 
    "name": "first chrome plugin", 
    "manifest_version": 2, 
    "version": "1.0", 
    "description": "good", 
    "browser_action": { 
        "default_icon": "1.png" 
    },
    "permissions": [
        "tabs", "http://*/*","https://*/*"
    ],
    "content_scripts": [ 
        { 
            "matches": ["https://www.baidu.com/*"], 
            "js": ["myscript.js"] 
        } 
    ] 
}

1.png 的话,随便拖一张图片进来就 OK 啦。另外需要注意的是,该文本文件需要用 UTF8 字符集保存。

现在让我们把 helloworld 添加进去。在 manifest 文件里有几行这样的代码。

json 复制代码
"content_scripts": [
    {
      "matches": ["http://www.baidu.com/*"],
      "js": ["myscript.js"]
    }
  ]

注意跟之前的代码用逗号分割开。

可以看到我们新增了一个内容,就是 content_scripts,详细的介绍应该去看官方文档,我在这里简要介绍下,content_scripts 是运行在打开页面的脚本,可以拿到整个页面的 DOM 对象,所以可以利用该脚本对页面进行操作。

新建一个 js 文件 myscript.js,里边代码很简单。注意该文件为utf-8编码

js 复制代码
alert("HelloWorld");
document.body.style.backgroundColor="gray";

在扩展程序页面重新加载插件,就可以去看效果了。

当我打开百度的时候,Oh,my god!

参考链接

chrome extensions

相关推荐
O败者食尘D10 分钟前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
守城小轩6 小时前
WebRTC指纹识别——未来展望(下篇)
chrome·webrtc·chrome devtools·指纹浏览器·浏览器开发
~heart将心比心17 小时前
Chrome(谷歌)浏览器 数据JSON格式美化
前端·chrome
眼眸流转1 天前
Chrome插件学习笔记(三)
chrome·笔记·学习
奔跑的皮皮虾1 天前
chrome使用Modheader插件让浏览器直接预览图片,不下载
chrome·modheader
庄毕楠1 天前
【Chrome】下载chromedriver的地址
前端·chrome
大猫会长1 天前
关闭chrome自带的跨域限制,简化本地开发
前端·chrome
dogodo2 天前
拒绝丑陋的自带书签管理页
前端·chrome·开源
GeminiJM2 天前
一次粗心导致的bug定位
前端·chrome·bug
伊成2 天前
linux中如何清除history命令
linux·运维·chrome