Chrome浏览器插件开发心得

小鱼儿 2022-01-16 02:09 340阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

**一、学习基础知识**

从现在的经验来看，基本只需要看一下，360翻译的开发文档即可，开发出一个适合大部分人要求的插件了。

文档：[http://open.chrome.360.cn/extension\_dev/overview.html][http_open.chrome.360.cn_extension_dev_overview.html]

**二、实战经验**

先给出我开发的[XPlayer][]的配置，下面的经验可参考。

> \{  
> “name”: “XPlayer “,  
> “version”: “0.2″,  
> “description”: “XP(XPlayer),豆瓣音乐播放器”,  
> “manifest\_version”: 2,  
> “homepage\_url”: “http://www.xiongchuan.org/xplayer”,  
> “icons”:\{  
> “16″ : “icon\_16.png”,  
> “48″ : “icon\_48.png”,  
> “128″ : “icon\_128.png”  
> \},  
> “browser\_action”: \{  
> “default\_icon” : “icon\_128.png”,  
> “default\_title” : “XPlayer”,  
> “default\_popup” : “popup.htm”  
> \},  
> “background”:\{  
> “page”:”background.htm”  
> \},  
> “permissions”: \["tabs"\],  
> “content\_scripts”:\[  
> \{  
> "matches":\["http://\*.douban.com/\*"\],  
> “js”:\["js/jquery.min.js","js/content\_scripts.js"\]  
> \}  
> \]
> 
> \}

**1、权限问题**

> Refused to execute JavaScript URL because it violates the following Content Security Policy directive: “script-src ‘self’ chrome-extension-resource:”.

一般类似这样的报错有这样两种可能：

第一、在你的manifest.json里面要加入 ”permissions”: \["tabs","https://\*/\*"\] 这样的配置

第二、在你的html代码里面（如popup.htm,background.htm），a标签之类的在οnclick=”" ，href=”javascript:;”加了Inline(内敛)js脚本。在实际使用中，A标签的href=”javasript:;”很常见，即使错误控制台有这样的报警也不用理会。

**2、生命周期**

a. popup.htm 页面的变量会随着popup.htm消失而消失

b.background.htm 会一直存在，直到浏览器关闭，但是如果你安装了 Google的新聊天工具：”环聊”，它默认会使Chrome在后台运行，就是说即使你关了浏览器，只要环聊还开着，实际上background.htm也是存在的。

**3、调试**

popup.htm 当弹出时 可以使用Chrome的开发者工具调试。

background.htm 可以 chrome://chrome/extensions/ 插件管理器界面 ，点击background.htm链接打开开发者工具

[![XPlayer插件管理][XPlayer 1]][XPlayer_XPlayer 1]

**4、消息交互**

popup.htm,background.htm,content\_scripts 之间大体上分为两种交互方式。

a.直接调用

popup.htm与background.htm 里面的数据可以直接调用，例如：

popup.htm调用background.htm的Window对象：var backgroundWindow = chrome.extension.getBackgroundPage();

此时，popup.htm页面就拥有了background.htm的整个对象，只需要获取一次，如果background.htm里面有计划任务，数据一直在变，可以通过backgroundWindow变量，直接使用。但是如果background.htm里面的文档也在变化，popup.htm想要直接使用background.htm文档页面，就不行，必须要实时刷新文档页面，可以采用定时器实时的把background.htm的页面，刷新到popup.htm页面来。

> setInterval(function()\{  
> document.body.innerHTML = bgWindow.document.body.innerHTML;  
> popup.BindEvents();  
> \},1000);

b.消息通信

消息通信，涉及到两方，例如：A和B。

A要给B发消息，则需要使用 chrome.extension.sendRequest(msg); B要接收A的消息，就必须要设置接收器

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) \{\}));

同样如果B要给A发消息也应该和上面的流程一样。

对于写过桌面程序、Android、Ios程序的人来说，这很好理解。对于纯做web的人，或新手来说估计不大知道这回事。在此说明一下。更多的见文档 [http://open.chrome.360.cn/extension\_dev/messaging.html][http_open.chrome.360.cn_extension_dev_messaging.html]

PS：popup.htm也可以和background.htm进行消息通信的方式交互。

**5、部署**

a.直接拖拽安装

360极速浏览器、金山猎豹浏览器 支持的很好

Windows下的Chrome浏览器，会提示安全问题，无法安装，chrome://chrome/extensions/ 在这个页面，勾选开发者模式即可。

b.google web store安装

chrome,360极速，猎豹都支持Google的web store。

PS：现在注册成为google的web store开发者，需要5美元认证，这里大家不要着急，只要你用支持VISA的信用卡，然后网上搜索一个美国的地址，即可以开通。

到此、把我这几天开发插件的经验，简单总结一下。

简单说下我的插件Git地址：[https://gitcafe.com/xiongchuan86/XPlayer/][https_gitcafe.com_xiongchuan86_XPlayer]

转载于:https://my.oschina.net/hierick/blog/136313

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220115/985cf9d385124243a090621da581e2da.png
[http_open.chrome.360.cn_extension_dev_overview.html]: http://open.chrome.360.cn/extension_dev/overview.html
[XPlayer]: http://www.xiongchuan.org/xplayer
[XPlayer 1]: http://static.oschina.net/uploads/img/201306/07175608_aZEZ.png
[XPlayer_XPlayer 1]: http://www.xiongchuan.org/blog/wp-content/uploads/2013/06/QQ%E6%88%AA%E5%9B%BE20130607171838.png
[http_open.chrome.360.cn_extension_dev_messaging.html]: http://open.chrome.360.cn/extension_dev/messaging.html
[https_gitcafe.com_xiongchuan86_XPlayer]: https://gitcafe.com/xiongchuan86/XPlayer/