Chrome插件开发从0到1_百度


Part1前言

​​Chrome​​​ 插件是我们经常用到的，比如广告屏蔽，浏览器美化，科学上网等。但是你有想过 ​​Chrome​​​ 插件是如何开发的吗？出于好奇，今天我们一起从 ​​0​​​ 到 ​​1​​​ 开发一个超级无敌简单的 ​​Chrome​​​ 插件，目的只为入门 ​​Chrome​​ 插件基础开发。

Part2关于 Chrome 插件

Chrome 插件开发官方文档

http://chrome.cenchy.com/

​​Chrome​​​ 是由 ​​html、js、css​​ 和静态文件等组成的文件集合。

​1文件结构​

插件结构

插件文件结构大致如下：

│  jquery-3.5.1.js
│  manifest.json
│  my.js
│  popup.html
│
└─images
        logo.png
        logo128.png

其中 ​​manifest.json、popup.html​​​ 为必选文件，其中 ​​manifest.json​​​ 中声明了插件的基本信息，是整个插件的总入口，就连 ​​popup.html​​​ 也是在它里面定义的，主要部分 ​​content_scripts​​​ 定义了插件生效策略。​​popup.html​​ 可以理解为插件和用户交互的首页。

manifest.json 内容

{
 "manifest_version": 2,
 "name": "myCtx",
 "version": "1.0",
 "description": "学习chrome插件",
 "icons": {
  "19": "images/logo.png",
  "38": "images/logo.png",
  "128": "images/logo128.png"
 },

 "browser_action": {
  "default_title": "我的第一个Chrome插件",
  "default_icon": "images/logo.png",
  "default_popup": "popup.html"
 },

 "content_scripts": [{
  "matches": [
   "https://www.bilibili.com/*",
   "https://www.baidu.com/*"
   ],
  "js": ["my.js"],
  "all_frames": true,
  "run_at": "document_end"
 }],

 "permissions": [
  "tabs"
 ]
}

如上，​​manifest.json​​​ 中的 ​​content_scripts​​​ 意为：当请求路径匹配到百度和哔哩哔哩时加载 ​​my.js​​​，具体操作在 ​​my.js​​ 中定义。

my.js 内容

console.log("这是插件注入信息>>>:"+document.title);
console.log("开始变红变大");
document.getElementById("su").style.color="red";
document.getElementById("su").style.fontSize="24px";
console.log("变红变大结束");

如上，​​my.js​​​ 中将 ​​ID​​​ 为​​“su”​​​的元素修改为红色，将字体大小修改为 ​​24​​​ 像素，其中 ​​ID​​​ 为​​“su”​​​的元素就是百度首页的搜索按钮。实际效果就是当访问百度首页的时候，搜索按钮中的​​“百度一下”​​​四个字会被修改为红色，同时字体变大为 ​​24​​ 像素。

popup.html 内容

<html>
 <head>
  <meta charset="utf-8">
  <style>
   body{
    font-family:"Microsoft";
    width:500px;
    min-height:100px;
   }
  </style>
 </head>
 <body>
  <h1>字体变红变大</h1>
 </body>
</html>

如上，​​popup.html​​​ 中只会展示一个 ​​100*500​​​ 大小的首页，上面显示​​“字体变红变大”​​。

​2插件全貌​

Chrome插件开发从0到1_chrome_02插件全貌

  1. ​​images​​​ 中存放了插件​​logo​​ 等静态资源。
  2. ​​jquery​​​ 暂时预留，你可以将​​js​​​ 和​​css​​ 等文件放在根目录，也可以将其放置到自定义文件中，区别只是使用时路径不一样。
  3. 其他的文件前面已经解释，不再介绍了。

Part3插件的导入

​3打开浏览器的开发者模式​

Chrome插件开发从0到1_html_03设置->更多工具->扩展程序Chrome插件开发从0到1_百度_04打开扩展程序右上角的：开发者模式

​4导入插件​

Chrome插件开发从0到1_html_05加载插件Chrome插件开发从0到1_html_06选择插件文件夹Chrome插件开发从0到1_百度_07启用插件

Part4插件的效果

​5访问哔哩哔哩​

浏览器打开：https://www.bilibili.com/

Chrome插件开发从0到1_chrome_08控制台日志

你会发现哔哩哔哩的网站 ​​title​​ 已经被打印出来了。

为什么开始变红变大后，没有打印变红变大结束呢？因为在哔哩哔哩网站中未找到 ​​ID​​​ 为​​“su”​​的元素，所以执行变红变大动作中断。

​6访问百度首页​

启用插件前

百度首页的搜索按钮​​“百度一下”​​为白色，大小合适。

Chrome插件开发从0到1_百度_09启用插件前

启用插件后

百度首页的搜索按钮​​“百度一下“​​为红色，大小较大。

Chrome插件开发从0到1_百度_10启用插件后

至此，我们的 ​​Chrome​​​ 插件从 ​​0​​​ 到 ​​1​​ 就成功结束了。

Part5总结

对于 ​​Chrome​​​ 从 ​​0​​​ 到 ​​1​​​，我们可以用一句话总结：用户访问网站，​​manifest.json​​​ 拦截匹配后触发 ​​my.js​​​ 执行，从而实现功能。期待你能开发出好用的 ​​Chrome​​ 插件。