谷歌(Chrome)浏览器插件开发教程

举报
轻狂书生FS 发表于 2020/11/30 22:45:25 2020/11/30
【摘要】 谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会HTML，JavaScript，CSS就可以动手开发浏览器插件了。 开发谷歌浏览器插件，就相当于在谷歌浏览器的基础之上进行活动，站在巨人的肩膀上，操作很多东西都方便了一些。有了插件，我们可以定制js爬虫、屏蔽网页广告，网页实时查词，修改http请求头，等等，能做...

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件，可以自定义浏览器的一些行为来适应个人的需要，只要你会HTML，JavaScript，CSS就可以动手开发浏览器插件了。

开发谷歌浏览器插件，就相当于在谷歌浏览器的基础之上进行活动，站在巨人的肩膀上，操作很多东西都方便了一些。有了插件，我们可以定制js爬虫、屏蔽网页广告，网页实时查词，修改http请求头，等等，能做的东西很多。

Chrome插件结构

需要声明的是，这个结构图是我自己画的，代表我对Chrome插件的理解，可能并不全面，甚至还不是十分准确，但找来找去找不到现成的，只好自己动手，如有谬误，请不吝指出。

如图，manifest.json作为插件的配置文件，同时可以看作程序的“入口”，因为它指定了显示什么图标，background script有哪些文件，content script又有哪些文件，pop up的页面是什么，等等。

什么是popup，什么是background script，相信大家都清楚了，那什么是content script呢？content script就是我们要注入到页面中的脚本，插件允许我们往网页中注入脚本，这是一个多么让人有想象力的功能，其功能之强大无需多解释，总的来说，就是让我们全面干预页面的内容！也许你马上会想到，这可能带来很大的安全隐患，没错，有些恶意插件会窃取你的页面信息，而有些有漏洞的插件则可能让你遭受跨站脚本注入（XSS）的攻击；另一个可能你会想到的问题是：往页面中注入自己的脚本，难道不会跟页面原本的脚本发生冲突吗？能想到这点说明你真的很厉害，如果我们的注入脚本和页面原本的脚本处于同一个运行环境中，确实会发生冲突，所以，Chrome是另外开辟了一个独立的运行空间，供我们的Content Script使用的，Content Script能访问DOM的内容，但却不能访问页面原本的脚本（我是说直接访问不行），反之，页面原本的脚本也不能直接访问Content Script。在图中，浅红色的背景块代表Content Script的运行环境，而浅蓝色的背景块代表页面运行环境，另外插件的运行环境我用浅绿色表示，注意，这是三个不同的运行环境，调试的时候你会充分体会到它们的不同。

那么，Content Script会在什么时候运行呢？默认情况下，是在网页加载完了和页面脚本执行完了，页面转入空闲的情况下（Document Idle），但这个是可以改变的，详情可参考https://developer.chrome.com/extensions/content_scripts.html，查看其中的“run_at”。

由于处于不同的运行环境中，Content Script和Background Script不能直接互相访问，那它们之间如何通信？通过Message！这个之后的代码中会有。

基础概念与入门案例

废话少说，先看一下插件版的hello world，了解插件的大体结构，麻雀虽小，五脏俱全。

  1. 创建manifest.json。任何插件都必须要有这个文件，用来描述插件的元数据，插件的配置信息。

  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
       {
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     "name": "Hello Extensions",
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "description" : "Hello world Extension",
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
     "version": "1.0",
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
     "manifest_version": 2,
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
    
        }
     
    
    
    7.

定义当前插件的名字，描述版本号等信息。
注意： version在打包完插件的时候，根据version判断插件是否需要更新。

  1. 给插件加一个浏览器右上角的图标。

     

    浏览器插件图标


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
       {
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     "name": "Hello Extensions",
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "description" : "Hello world Extension",
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
     "version": "1.0",
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
     "manifest_version": 2，
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
    
      #新增内容如下
     
    
    
    7. 
   
  7. 
    
    
     
    
    
    
    
    
     
     "browser_action": {
     
    
    
    8. 
   
  8. 
    
    
     
    
    
    
    
    
     
     "default_popup": "hello.html",
     
    
    
    9. 
   
  9. 
    
    
     
    
    
    
    
    
     
     "default_icon": "hello_extensions.png"
     
    
    
    10. 
   
  10. 
    
    
     
    
    
    
    
    
     
    
       }
     
    
    
    11. 
   
  11. 
    
    
     
    
    
    
    
    
     
    
        }
     
    
    
    12.

hello.html


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      <html>
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     <body>
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     <h1>Hello Extensions</h1>
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
     </body>
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
    
      </html>
     
    
    
    6.

hello_extension.png图标

 

hello_extension图标

  1. 新增快捷键，通过键盘快速打开，修改manifest.json

  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
       {
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     "name": "Hello Extensions",
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "description" : "Hello world Extension",
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
     "version": "1.0",
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
     "manifest_version": 2,
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
     "browser_action": {
     
    
    
    7. 
   
  7. 
    
    
     
    
    
    
    
    
     
     "default_popup": "hello.html",
     
    
    
    8. 
   
  8. 
    
    
     
    
    
    
    
    
     
     "default_icon": "hello_extensions.png"
     
    
    
    9. 
   
  9. 
    
    
     
    
    
    
    
    
     
    
       },
     
    
    
    10. 
   
  10. 
    
    
     
    
    
    
    
    
     
     
     
    
    
    11. 
   
  11. 
    
    
     
    
    
    
    
    
     
    
      #新增内容如下
     
    
    
    12. 
   
  12. 
    
    
     
    
    
    
    
    
     
       "commands": {
     
    
    
    13. 
   
  13. 
    
    
     
    
    
    
    
    
     
     "_execute_browser_action": {
     
    
    
    14. 
   
  14. 
    
    
     
    
    
    
    
    
     
     "suggested_key": {
     
    
    
    15. 
   
  15. 
    
    
     
    
    
    
    
    
     
     "default": "Ctrl+Shift+F",
     
    
    
    16. 
   
  16. 
    
    
     
    
    
    
    
    
     
     "mac": "MacCtrl+Shift+F"
     
    
    
    17. 
   
  17. 
    
    
     
    
    
    
    
    
     
    
       },
     
    
    
    18. 
   
  18. 
    
    
     
    
    
    
    
    
     
     "description": "Opens hello.html"
     
    
    
    19. 
   
  19. 
    
    
     
    
    
    
    
    
     
    
       }
     
    
    
    20. 
   
  20. 
    
    
     
    
    
    
    
    
     
    
       }
     
    
    
    21. 
   
  21. 
    
    
     
    
    
    
    
    
     
    
        }
     
    
    
    22.

  1. 安装浏览器扩展
    4.1 进入扩展程序

     

    image.png

4.2 加载含有manifest.json的文件夹，开发模式下使用。

 

加载插件

4.3 当你觉得开发完成的时候可以打包扩展程序，上面图片有。

注意：第一次打包的时候，会生成一个pem个人密钥文件，以后再次打包的时候就需要密钥文件了。

打包截图

 

  1. 看一下效果

     

    hello world插件效果

插件进阶

上面只是简单的介绍了开发插件的hello world，实际中，我们需要的功能远不止这么简单。需要更强大的功能，更多的库支持才能够胜任。下面介绍如何做出功能更完善的插件。我们从一个开源的插件脚手架做案例。

  1. 脚手架的地址

A template for building cross browser extensions for Chrome, Opera & Firefox.
https://github.com/EmailThis/extension-boilerplate

  1. 克隆到本地搭建开发环境

  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      git clone git@github.com:EmailThis/extension-boilerplate.git
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
    
      cd extension-boilerplate
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
    
      npm install
     
    
    
    4.
  1. 开发与打包
    开发的话：

  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      npm run chrome-watch
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
    
      npm run opera-watch
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
    
      npm run firefox-watch
     
    
    
    4.

打包：

npm run build

  1. 搭建好基本的开发环境，先研究此项目中所包含的内容，根据自己的需要往脚手架中填充东西。我先介绍几个常用的manifest.json配置。
    4.1 icons 定义浏览器扩展页面的图标。

     

    icon 对应图标位置


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
      "icons": {
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     "16": "icons/icon-16.png",
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "128": "icons/icon-128.png"
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
    
        },
     
    
    
    5.

4.2 permissions 此插件用到的浏览器的权限。常用的权限如下。在Chrome 插件API概览页面点进去，会看到此api需要的权限。

存储权限

 


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      "permissions": [
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     "tabs",
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "storage",
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
     "http://*/*",
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
     "https://*/*"
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
    
        ],
     
    
    
    7.

4.3 contentScripts，运行在浏览器网页的上下文页面，使用标准的DOM模型，contentScripts标签在控制台可以看到。

 

content Scripts位置


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
     "content_scripts": [
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
    
       {
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "matches": [
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
     "http://*/*",
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
     "https://*/*"
     
    
    
    6. 
   
  6. 
    
    
     
    
    
    
    
    
     
    
       ],
     
    
    
    7. 
   
  7. 
    
    
     
    
    
    
    
    
     
     "js": [
     
    
    
    8. 
   
  8. 
    
    
     
    
    
    
    
    
     
     "scripts/contentscript.js"
     
    
    
    9. 
   
  9. 
    
    
     
    
    
    
    
    
     
    
       ],
     
    
    
    10. 
   
  10. 
    
    
     
    
    
    
    
    
     
     "run_at": "document_end",
     
    
    
    11. 
   
  11. 
    
    
     
    
    
    
    
    
     
     "all_frames": false
     
    
    
    12. 
   
  12. 
    
    
     
    
    
    
    
    
     
    
       }
     
    
    
    13. 
   
  13. 
    
    
     
    
    
    
    
    
     
    
        ],
     
    
    
    14.

4.4 background后台页面，在浏览器前台看不到的页面，可以以后台进程的方式进行运行，也可以以事件的方式运行。需要打开扩展程序的开发者模式才能看到。

 

background 页面


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      "background": {
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
     "scripts": [
     
    
    
    3. 
   
  3. 
    
    
     
    
    
    
    
    
     
     "scripts/background.js"
     
    
    
    4. 
   
  4. 
    
    
     
    
    
    
    
    
     
    
       ]
     
    
    
    5. 
   
  5. 
    
    
     
    
    
    
    
    
     
    
        },
     
    
    
    6.

更详细的manifest.json文件配置信息请参考官方manifest.json文件格式

  1. 常用到的开发方式说明

     

    插件架构

5.1 一般我们会在浏览器的前台页面，也就是直接打开控制台就可以看到的扩展程序，通过contentScript指定加载的程序。在这里监听当前浏览器当前打开的页面，然后做一些与用户交互的东西。

5.2 在前台的交互，以消息的形式传递到background指定的脚本。

contentScript执行的程序一般可以跨域，浏览器的安全限制，而background指定的脚本可以跨域运行，获取所有浏览器cookie信息等等。

交互案例，详细的操作看一下项目的脚手架中。


  
    
   
  1. 
    
    
     
    
    
    
    
    
     
    
      chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
     
    
    
    2. 
   
  2. 
    
    
     
    
    
    
    
    
     
    
    
    3. 
  

 
chrome.runtime.onMessage.addListener(function callback)

一篇有关前后台通信的文章

  1. 在前后台可以通信之后，很多功能可以依赖第三方的库，当前我们参考的脚手架，可以直接使用npm安装第三方库。可以多花点心思研究插件的具体结构。

总结

浏览器插件开发，不管是在实用性上，还是趣味性上都是值得学习与了解的。本文试图阐述chrome插件开发的过程与原理，但篇幅有限，不可能面面俱到，不足之处，敬请谅解。
欢迎一起讨论与留言。

参考

这里千万千万注意了，我当初没仔细看popup.html里有一小段注释，这一小段注释说：出于安全考虑，javascript必须与html分开存放。而我想嘛，一个小测试程序，没必要分开吧，直接写一起不就行了吗？结果javascript死活执行不了，我翻来覆去找不到原因，还以为弹出的小窗口不支持javascript，在网上搜索了半天又没有结果，最后才发现是这个原因，浪费了许多时间，这个事情也一定程度上说明了：细节决定成败。



作者：Real_man
链接：https://www.jianshu.com/p/51c650f98d9c
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

文章来源: blog.csdn.net，作者：轻狂书生FS，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/LookForDream_/article/details/89361765

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript JSON
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入