图集1/4

正文 2902字数 229,927阅读

开发属于你的Chrome插件

Chrome浏览器插件开发是用JS来进行开发的,所开发出来的插件可以用在其它Chrome内核的浏览器里,比如QQ浏览器,360极速浏览器等等,但是开发测试一般用Chrome浏览器会比较方便,比如你用QQ浏览器的话就找不到插件生成菜单的咯

插件的后缀名是.crx,安装很简单,打开插件管理界面时,将文件夹上的这个文件往管理界面中空白处拖进去就会提示是否要安装了

1.部署

最基本的,新建一个文件夹作为插件项目目录,普通的插件都不需要多少代码和文件,所以全部丢在一个文件夹里都可以的,有必要的时候自己再建立子文件夹,修改相关路径即可

但是开发完后要打包生成插件时,必须要有签名密钥,如果你们是比较规范化管理的或者中等规模以上的公司想进行开发,我建议一定要保管好签名密钥

文件结构如下


其它

上手插件的开发时你可能会感到这里那里都有一些限制会有点不爽,但站在官方角度你可能就会理解谷歌这样限制其实是有原因的,不详谈这个,但反正你要知道你的JS不是要读什么都能读出来的

还有,虽然是用JS开发,但有的对象在某些场合下是不允许使用的,而插件的JS操作范围还凌驾于页面之上,可以操作标签页,比如新建一个标签,关闭一个标签,或者重写右键菜单什么的,为了让你操作这些,官方提供了更多的对象给你,比如Chrome.tabs对象操作窗口标签这些,要通过官方的手册去详细了解这些对象的各种API是否能满足你的开发需求,我的教程只是简要地将你引导上这条道路

个人开发过的插件并不复杂,这里暂时没什么深度知识可谈,但我很看好Chrome插件,有了它我能在工作上方便很多,至少我是有用过它来优化工作的,比如我曾经一家公司有N个项目,每个项目有几个不同的测试账号,可是要记这些账号就好麻烦呀,我每次登陆时都要去笔记里复制帐号密码

于是我开发了一个Chrome插件,只要打开插件主界面,通过下拉选项选择项目和环境(本地开发,测试,线上)后,会自动显示相关的测试账号名称,我只要再选一下测试账号,然后它就自动给我打开新标签,跳转到指定项目的登陆页面,再自动输入帐号密码提交登陆了

这个过程会执行得很快(除了页面访问环节受网速影响),所以我一下子就已经在项目里面进行测试了,起码减少了很多麻烦的访问地址,输入,登陆操作,虽然也不是全部浏览器,但是平时主要开发就是用这个浏览器,然后其它都是看兼容性的~~~不管咋的,反正工作效率就提高了

2.配置

先定义配置文件

配置文件名固定叫manifest.json,里面是以JSON格式编写配置的

有个manifest_version的根字段要声明配置版本.现在最新的版本是2,现在我们尝试开发插件就写manifest_version : 2

其中编码规范有以下2点:

所有键名要用双引号,键值如果是字符串都要用双引号,不使用单引号,如果键值是数字则不管你,反正用上了字符串就得双引号
数组的最后一个元素不能加逗号,会导致配置语法报错
下面贴出这个manifest_version文件的配置样本内容:
{ "name": "插件名称,比如上架到谷歌应用商店时要显示", "version": "1.0.0", //你的插件版本 "manifest_version": 2, //配置版本号,你就跟着写2就是了 "description": "插件介绍", "browser_action": { "default_icon": "ico.png", //插件图标文件名,需要在配置文件相同目录下放这个文件让配置解析器去读取得到 "default_title": "插件图标标题", //这个图标目前是嵌在浏览器地址栏右边区域的,鼠标划过会显示这个标题 "default_popup": "ui.html" //点击插件图标后默认弹出的插件界面,将会读取同目录下这个文件作为界面 }, //插件权限配置 "permissions": [ "http://xxx.com/xxx.html", //这个插件在哪些网址下能生效,不匹配的网址不会出现插件图标 "*://*/*", //要在全部网址下生效,不能直接写一个 * 号,而是要有 协议头 域名 pathinfo 三个部分的描述,每个部分全匹配才写*号 "http://xxx.com/shop/*.html", //可以为部分片段设置通配符 "tabs" //这个字符串表示插件可以操作网页选项卡,比如新建/关闭/切换当前选项卡 ] }
Run code
Cut to clipboard

    3.创建界面文件和代码

    根据配置文件的browser_action的default_popup所指的文件名,我们建立一个ui.html作为界面,里面写一些HTML和CSS

    你最好用CSS定义一下body的宽高,不然到时候插件界面弹出来时会默认比较窄

    4.实现界面交互

    界面中不能带有任何js代码,所有js都必须通过script标签外部引入来实现
    比如你要一个#btnLogin在点击之后可以提示”登陆成功”

    先在插件开发目录下创建”ui.js”,里面写上
    window.addEventListener('load', function(){ document.getElementById('btnLogin').addEventListener('click', function(){ alert('登陆成功'); }); });
    Run code
    Cut to clipboard

      然后在ui.html中加入script标签来引入JS
      <script src=”ui.js”></script>
      Run code
      Cut to clipboard

        5.生成插件

        打开chrome选择扩展程序菜单

        进入扩展程序管理界面,上面一个角落会有个开发者模式的钩选项,把它钩上,就会多出几个按钮功能.选择加载已解压的扩展程序,然后选择你的这个插件开发目录,然后就显示加载到的插件信息了

        此时注意,右上角已经出现了配置文件所指定的图标文件图标,然后点击这个图标就会下拉出一个插件界面

        好了,接下来你就是不断地修改HTML,重新加载插件,继续点击插件按钮弹出界面

        居于这个基础你肯定能开发出你自己插件

        谷歌浏览器插件开发手册

        360极速浏览器应用开放平台开发文档

        Chrome官方开发文档 需翻墙？

        https://developer.chrome.com/extensions/getstarted