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

Posted 2020-08-31 cosyer的博客

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

Google Chrome是一个很强大的浏览器，提供了各种各样的插件，大大提升了使用了的效率，比如vimium、honx等。

Google在提供这些插件的同时还允许用户开发自己的插件。

最近在写js的脚本采集程序，需要测试在网页中的运行情况，因此可以利用Chrome插件进行测试。

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

1. 首先第一步是新建一个文件夹，并新建一个manifest.json文件，内容如下:

{
  "name": "第一个Chrome插件",
  "manifest_version": 2,
  "version": "1.0",
  "description": "我的第一个Chrome插件，还不错吧",
  "browser_action": {
    "default_icon": "1.png"
  },
  "content_scripts": [
    {
      "matches": ["http://chenyu.mydearest.cn/"],
      "js": ["test.js"]
    }
  ]
}

     

manifes_version声明是我们使用的版本。

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

icons指插件显示在的图标。

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

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

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

      3.新建js文件test.js

alert("HelloWorld");
document.body.style.backgroundColor="gray";

content_scripts是运行在打开页面的脚本，可以拿到整个页面的DOM对象，所以可以利用该脚本对页面进行操作。

      4.打开chrome，打开菜单，找到扩展程序选项我的在扳手->工具->扩展程序 路径下。点击加载正在开发的扩展程序，添加文件夹就OK啦！