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

最新推荐文章于 2023-03-16 08:41:53 发布

小码哥BASE64

最新推荐文章于 2023-03-16 08:41:53 发布

阅读量3.8k

点赞数 3

分类专栏：知识分享文章标签： chrome插件 helloworld g-wzj

本文链接：https://blog.youkuaiyun.com/u014419512/article/details/25876607

版权

本文介绍了如何开发一个简单的Chrome扩展，实现将自定义JS注入到目标网页并执行的功能。首先创建manifest.json配置文件，然后添加content_scripts部分来指定要运行的脚本。接着创建myscript.js，当打开网页时，该脚本会使页面元素变灰。通过Chrome的扩展程序管理页面，可以加载并测试这个扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道JS是运行在客户端的，所以，如果我们自己写一个浏览器的话，是一定可以往下载下来的网页源代码中加入js的。可惜我们没有这个能力。不过幸运的是，chrome的扩展程序可以帮我们做到这件事。

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

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

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

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

{
  "name": "第一个Chrome插件",
  "manifest_version": 2,
  "version": "1.0",
  "description": "我的第一个Chrome插件，还不错吧",
  "browser_action": {
    "default_icon": "1.png"
  }
}

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

你的第一个chrome扩展就完成了。

什么？完成了？这么快？

确实是，打开chrome，打开菜单，找到扩展程序选项我的在扳手->工具->扩展程序路径下。

点击加载正在开发的扩展程序