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

相关推荐
程序员鱼皮16 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
控心つcrazy2 天前
《独立开发者精选工具》第 018 期
开源·开发·工具·独立开发·出海·独立开发者
pc大老2 天前
优化浏览体验:4个设置让Google Chrome更好用!
chrome·google·谷歌浏览器·谷歌·浏览器设置
智能化咨询2 天前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
霍格沃兹软件测试开发2 天前
快速掌握Dify+Chrome MCP:打造网页操控AI助手
人工智能·chrome·dify·mcp
Anson Jiang2 天前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
恶猫2 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
林克爱塞尔达3 天前
Linux入门(二)
linux·运维·chrome
Larry_zhang双栖3 天前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
allanGold3 天前
【Chrome】chrome 调试工具的network选项卡,如何同时过滤出doc js css
chrome·调试·devtools·技巧·network选项卡