Chrome浏览器插件开发心得
一、学习基础知识
从现在的经验来看,基本只需要看一下,360翻译的开发文档即可,开发出一个适合大部分人要求的插件了。
文档: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链接打开开发者工具
popup.htm,background.htm,content_scripts 之间大体上分为两种交互方式。
popup.htm与background.htm 里面的数据可以直接调用,例如:
popup.htm调用background.htm的Window对象:var backgroundWindow = chrome.extension.getBackgroundPage();
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
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/
Chrome浏览器插件开发心得相关推荐
- Google Chrome 浏览器插件开发学习
2014/11/16 Google Chrome 浏览器插件开发学习 因笔记存有文件,不便发表在cnblogs上,请到evernote里找笔记 "Google Chrome 浏览器插件开发学 ...
- Chrome浏览器插件开发-淘宝自动登录
http://www.cnblogs.com/oshine/p/5379349.html 浏览器插件的介绍 Chrome浏览器插件开发的准备工作 manifest.json配置介绍 页面如何注入scr ...
- chrome浏览器插件开发-在当前网页中嵌入插件页面
chrome浏览器插件开发-在当前网页中嵌入插件页面 既然想嵌入插件页面就是需要写html和css 在myPlugin中创建contentCss文件夹,里面创建index.css文件 在manifes ...
- 【Chrome浏览器插件开发】浏览器插件运行机制03之实战使用Vue.js 3 + Vite 2开发出简易的浏览器插件(含源码)
文章目录 知识点: 一.使用 vite 创建项目 1.1 环境搭建 1.2 安装vite工具 1.3 创建vite项目 1.4 进入项目并安装依赖 1.5 修改端口 1.6 运行项目 二.创建项目资源 ...
- 谷歌(Chrome)浏览器插件开发教程
谷歌浏览器插件是一种小型的用于定制浏览器体验的程序.通过插件,可以自定义浏览器的一些行为来适应个人的需要,只要你会HTML,JavaScript,CSS就可以动手开发浏览器插件了. 开发谷歌浏览器插件 ...
- Chrome浏览器插件开发入门
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 转载:h ...
- chrome浏览器插件开发v3——storage存储的使用
前言 为了减少浏览器运行内存,background页面现在已更改为service_worker按需运行,即不使用的情况下service_worker会自动关闭,如果使用的话将再次开启,一段时间后又会自 ...
- 【Chrome浏览器插件开发】浏览器插件运行机制02之实战开发出一款Google浏览器插件——含源码全部过程 (建议在Linux环境下)
一.浏览器插件配置文件 manifest.json入门 每个浏览器插件都有一个 JSON 格式的文件,叫做 manifest.json,里面提供了插件的描述信息. manifest.json 文件本质 ...
- chrome浏览器插件开发
http://wenku.baidu.com/view/ef1d608383d049649b665817.html http://www.chromi.org/archives/13915 http: ...
最新文章
- 酷炫的深度学习网络图怎么绘制出来的?
- JavaScript 工作原理之五-深入理解 WebSockets 和带有 SSE 机制的HTTP/2 以及正确的使用姿势(译)...
- mysql crash 如何定位_MySQL实例crash的案例详细分析
- Druid 配置_配置WebStatFilter
- 解决在Mac上用pyenv安装python3失败的问题
- 二值化处理c语言程序,数字信号处理c语言程序集
- 【线性代数公开课MIT Linear Algebra】 第六课 AX=b与列空间、零空间
- mysql mha好吗_MySQL高可用方案MHA的一些总结和思考
- Django中form字段操作
- 公安部4号令中关于电子邮服务器
- 小明买了一箱鸡蛋,假设有n个,可以一天吃1个,也可以一天吃2个,请问有多 少种方法可以吃完?...
- HDU 2531 (BFS搜索)
- 实时数据库与时序数据库
- 自媒体短视频怎么制作?视频制作大神分享的超全教程,新手也能轻松上手!
- JS 的5个不良编码习惯,现在就改掉吧
- 如何解决移动端300ms延迟
- Java实现Base64、DES、AES、RSA加解密以及加密方式之间的区别
- opencv和magick两个图像处理库的使用心得
- 改变IDEA模板光标停留的位置
- LenNet5-MNIST