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

相关推荐
Joker`s smile4 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639974 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊4 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
shimly12345613 小时前
bash 脚本比较 100 个程序运行时间,精确到毫秒,脚本
开发语言·chrome·bash
秃了也弱了。16 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
叶常落18 小时前
chrome插件合集
chrome
蓝天白云下遛狗18 小时前
goole chrome变更默认搜索引擎为百度
前端·chrome
程序员鱼皮20 小时前
Cursor 网页版来了,这下拉屎时也能工作了
计算机·ai·程序员·开发·项目·编程经验
代码讲故事1 天前
多种方法实现golang中实现对http的响应内容生成图片
开发语言·chrome·http·golang·图片·快照·截图
进击的小白兔vl1 天前
VUE admin-element 后台管理系统三级菜单实现缓存
vue.js·chrome·缓存