文档章节

Chrome浏览器插件开发心得

熊川
 熊川
发布于 2013/06/07 17:56
字数 919
阅读 1.5W
收藏 124

一、学习基础知识

从现在的经验来看,基本只需要看一下,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标签之类的在onclick=”" ,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插件管理

 

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

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/

© 著作权归作者所有

熊川

熊川

粉丝 15
博文 5
码字总数 2882
作品 5
朝阳
CTO(技术副总裁)
私信 提问
加载中

评论(6)

夺命奇犽
夺命奇犽
我目前刚入门想写一个音乐播放器,但是关于音乐播放和交互获取信息的问题不太懂,可以请教你吗?
便
便是晴天
不错,收藏学习了
WeirdBIrd
WeirdBIrd
给力
凡程子
凡程子
很不错啊
ellan
ellan
支持
官方入员
官方入员
不错。收藏学习了。
离线Chrome插件安装文件(crx)的安装方法

离线Chrome插件安装文件(crx)的安装方法 一、正常安装方法 1.开发谷歌浏览器,设置->扩展程序 在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序的Chrome插件,或者一个Chrom...

曾将
2018/07/10
0
0
谷歌(Chrome)浏览器插件开发教程

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

艾贺
2018/01/23
0
0
“插件(application/x-vlc-plugin)不受支持”NPAPI和PPAPI的问题

最近做一个前端的项目,项目需要引用VLC浏览器插件,javascript在IE、Firefox等浏览器上都没有问题,唯独在Chrome(谷歌)浏览器中插件不能被会支持。    不断更换Chrome版本后发现了问题。只...

yizhichao
2018/07/25
261
0
【教程】CRX格式插件不能离线安装?本地扩展CRX无法安装怎么办?

最近有很多用户反映有一些Chrome插件在离线安装的时候,根据本站的教程:离线安装CRX格式chrome插件的方法。无法正常完成安装,提示“只能通过Chrome网上应用商店安装该程序”,小编为了了解...

CS青雀
2019/02/21
0
0
十款开发者常用的Chrome插件,让chrome成为开发利器!

本文作者:TheBeauty 原文地址:www.cnblogs.com/thebeauty/p… 前言 Chrome浏览器无论是作为浏览器市场的NO1还是其强大的跨平台能力以及丰富的扩展插件,一直是许多开发者的首要选择的浏览器...

codeGoogle
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何创建spring-boot的web项目

第一步:新建一个maven项目 新建项目,选择maven 填写GroupId和ArtifactId 下一步默认即可,直接点击finish 创建完成后项目结构如下 第二步: 配置pom.xml 在pom.xml中添加如下代码: <p...

幻境fairy
13分钟前
46
0
「网易官方」极客战记(codecombat)攻略-地牢-Kithgard 斗殴-kithgard-brawl

每次你从一波波的敌人中存活下来,就会变得更难。但是你如果你输了,你必须要等一天后才能再次提交。 简介 这是一个无尽的挑战关卡,敌人会一波波地向你发起进攻,一次比一次强大,直到你坚持...

极客战记
15分钟前
68
0
基于数据回放功能开发的线性挂单流策略

前言 人们常说,交易是一门艺术,而艺术来源于灵感。所以今天想和大家分享一下,如何利用发明者量化数据回放功能,发掘自己的交易灵感。 交易的灵感和盘感 通常我们所说的灵感,是指人们在思...

发明者量化
19分钟前
40
0
技术答疑丨如何区分游戏短音乐与音效以及配音

在游戏的声音领域,一般游戏音乐、音效与配音,但是每个类别又有不同的细分,在我们奇亿音乐与游戏厂商的日常沟通中,发现这些问题一直困扰着大家,一起来看看吧。 1、如何区分游戏的音效与配...

奇亿音乐
20分钟前
66
0
如何在mac上录屏

新上手的苹果电脑,想要完成录屏操作还不知道从哪下手的小伙伴有福利了,小编今天分享如何在mac上录屏内容,需要的来一起了解吧~ 如何在mac上录屏 Aiseesoft Screen Recorder for Mac(录屏软...

麦克虾仔
32分钟前
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部