谷歌浏览器插件开发（十分钟带你入门Chrome插件开发）

一    
    
    
、简述

我们所说的chrome插件一般都是指chrome扩展程序（Chrome Extension）    
    
    
。chrome插件是一个用Web技术开发     


     


     


  、用来增强浏览器功能的软件    
    
    
，它其实就是一个由HTML




 




 




 
、CSS
   

   

   

、JS     

     

     

 、图片等资源组成的一个.crx后缀的文件     


     


     


  。chrome插件除了Chrome浏览器之外     


     


     


  ，还可以运行在所有webkit内核的国产浏览器




 




 




 
，比如360极速浏览器 




  




  




  、360安全浏览器

  


  


  


、搜狗浏览器     
     
     
、QQ浏览器等等




 




 




 
。

二  




   




   




   、chrome插件的能力

除了支持传统的一切 web API


 



 



 


、JavaScript API 以外
   

   

   

，chrome插件额外支持以下API（chrome.xxx）：

bullet 浏览器窗口（chrome.window） tab标签（chrome.tabs） 书签（chrome.bookmark） 历史（chrome.history） 下载（chrome.download） 网络请求（chrome.webRequest） 自定义右键菜单（chrome.contextMenus） 开发者工具扩展（chrome.devtool） 插件管理（chrome.extension）

三               、chrome插件的组成

主要由以下部分组成：

manifest.json （配置文件     

     

     

 ，目前最新是v3版本） popup (点击插件图标弹出的页面) content script (插入到目标页面中执行的JS) background script (在浏览器后台Service Workers中运行的程序) options (选项页面 




  




  




  ，可有可无)

四   




    




    




   、manifest v3的主要特性

Service Workers取代background pages

  


  


  


，使用Service Workers     
     
     
，可对资源进行缓存  




   




   




   ，从而实现离线访问
   

   

   

。 网络请求调整


 



 



 


，新增了一个declarativeNetRequestAPI               ，允许插件修改及阻断网络请求     

     

     

 。 远程资源访问限制   




    




    




   ，禁止访问外部的JavaScript及Wasm文件
















，图片
















、音视频文件不受影响 




  




  




  。 Promises使用               ，可以愉快地使用promise了    



     



     



   ，包括async/await

  


  


  


。 manifest文件的部分配置和chrome API做了部分调整     
     
     
。

五               、基于manifest v3的chrome插件Demo展示

如需获取demo项目源码
















，请到我的github上自行clone    
    
    
，顺便给咱点个Star     


     


     


  ，非常感谢  




   




   




   。

https://github.com/hepengwei/chrome-extension-basic-demo

六    



     



     



   、chrome插件开发本地调试

调试popup.html页面：右键点击浏览器右上角插件图标




 




 




 
，然后选择点击"审查弹出内容"


 



 



 


。 调试background.html或background.js：在浏览器的扩展程序管理页面找到自己加载的扩展程序
   

   

   

，然后点击"Service Worker"（MV2则是"背景页"）               。 调试content_scripts.js：在注入的页面按F12     

     

     

 ，和正常页面一样调试   




    




    




   。 调试options.html页面：右键点击浏览器右上角插件图标 




  




  




  ，然后选择点击"选项"

  


  


  


，打开插件的选项页     
     
     
，然后按F12  




   




   




   ，和正常页面一样调试
















。

七
















、chrome插件开发注意事项总结

manifest.json必须放在插件项目的根目录


 



 



 


，里面包含了插件的各种配置信息               ，其中也包括了popup    
    
    
、content script     


     


     


  、background script等路径               。

不支持使用SVG格式的图片    



     



     



   。

在MV3中   




    




    




   ，由于Service Workers的机制
















，background页中不支持使用XMLHttpRequest               ，建议使用fetch()
















。

不允许在html文件中写js代码    



     



     



   ，只能通过script标签导入js文件的方式
















，导入文件也不能使用项目外部的文件    
    
    
，比如不能使用CDN上的文件

不要直接在元素中给onclick属性一个函数调用     


     


     


  ，例如testB




 




 




 
，即使有定义onSave方法
   

   

   

，也会报错onSave is not defined     

     

     

 ，要给元素添加事件要使用JS动态添加 




  




  




  ，例如$(“#save    
    
    
  ”).click(onSave)    
    
    
。

内容脚本和网站想要访问的所有资源都必须在web_accessible_resources属性下声明     


     


     


  。

popup可以直接调用background中的JS方法

  


  


  


，也可以直接访问background的DOM




 




 




 
。

在对popup页面审查元素的时候popup会被强制打开无法关闭     
     
     
，只有控制台关闭了才可以关闭popup  




   




   




   ，原因很简单：如果popup关闭了控制台就没用了
   

   

   

。

插件图标在未命中popup的URL匹配规则的页面时没有变灰


 



 



 


，这是chrome自身的一个bug（可以关注bug论坛：https://bugs.chromium.org/p/chromium/issues/detail?id=1127067）     

     

     

 。

chrome.tabs.connect或chrome.tabs.sendMessage不能用于与选项页面通信               ，选项页面可以使用chrome.runtime.connect和chrome.runtime.sendMessage与background页通信 




  




  




  。

很多时候你发现你的代码会莫名其妙的失效   




    




    




   ，找来找去又找不到原因
















，这时打开background的控制台才发现原来某个地方写错了导致代码没生效               ，正是由于background报错的隐蔽性(需要主动打开对应的控制台才能看到错误)    



     



     



   ，所以特别注意这点

  


  


  


。

关于content script的注意事项

content script文件中可以获取web页面的DOM并修改
















，content script和原始页面共享DOM    
    
    
，但是不共享JS     


     


     


  ，JS是相互隔离的




 




 




 
，可以通过window.postMessage和window.addEventListener来实现二者消息通讯     
     
     
。 不能访问background或popup中JS定义的变量或方法  




   




   




   。 不能访问web页面或其他content script中定义的变量或方法


 



 



 


。 不能发送跨域请求               。 content script文件中只能使用下面列出的API:

chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)

chrome.i18n

chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)

chrome.storage

八




 




 




 
、国际化配置

在项目根目录下创建名为 “_locales


     


     


     
” 的文件夹
   

   

   

，在该文件夹中加入如下文件夹及文件

_locales/en/messages.json _locales/zh_CN/messages.json

在每种语言的messages.json中添加相同的属性变量     

     

     

 ，配置如下：

{ "tooltip": { "message": "这里是字段显示的内容" } }

使用时

在manifest.json或CSS文件中通过 __MSG_tooltip__ 引入 




  




  




  ， { "action": { "default_title": "__MSG_tooltip__"

  


  


  


， }, "default_locale": "zh_CN", }

在JS文件中通过 const tooltip = chrome.i18n.getMessage(“tooltip
 




 




 




”) 引入   




    




    




   。