从零开始编写一个Chrome插件

  • 从零开始编写一个Chrome插件已关闭评论
  • 239 views
  • A+
所属分类:JavaScript
编写一个chrome插件是一个很简单的事只要会javascript就可以轻松完成这个事情,但是你要完成一个十分完美的插件还是比较困难的,使用插件我们可以做很多有趣的事情,比如我们可以做一个抢火票的插件,自动提醒,自动买票等等。本篇教程将教大家怎么完成一个chrome插件。
从零开始编写一个Chrome插件

开始工作

插件功能

提取页面所有样式表里面的背景图片显示到插件中

Manifest

manifest.json是插件的配置文件整个插件最重要的文件,配置权限、content脚本、后台脚本、popup、插件ICON都是这个文件。官方文档 上面是插件的manifest.json完整内容.

pageAction

在这个插件中我们使用的是page_action而不是browser_action, 使用page_action需要开发者自己控制插件的使用状态, 默认情况是下是非使用状态(开启chrome.pageAction.show(tabId))与browser_action相反。官方认为在某些条件下使用才能使用插件应该选择page_action, 比如我是针对某个网站(githubgoogle),或者针对网页内容特定值(jsonrss)。
比如监听tabs页的更新事件,当打开的页面是github网站的话就把插件更新为活动状态.这里需要申请tabs权限, permissions属性里面填写tabs即可, 而browser_action不需要这么做。

default_popup

这个属性是设置点击插件弹出的页面层. 也是上面那张事例的显示页面。
Note:html中是不可以内嵌内联脚本的,所以必须文件形式引入`

content_scripts

当前一个tab页打开时,chrome就会执行插件注入的脚本("js": ["js/content.js"]), 会根据"matches": ["http://*/*", "https://*/*"]匹配规则。 注入的脚本和页面中的脚本运行环境是相互独立的互不干扰。注入的脚本可以使用DOM API来控制页面的内容和操作。
Note: 建立插件之间的通信或者background、popup、content_script之间通信都是通过sendMessage来完成。必须有绑定chrome.runtime.onMessage.addListener的地方,这里我们绑定在background脚本中。

background

插件中的后台脚本在chrome打开就会执行,只要有权限几乎所有API都可以使用。
Note: 注意updated的状态,是有两种loading和complete。还是消息是通过消息内容来区别消息类型的

插件流程

从零开始编写一个Chrome插件
现在整个插件的功能完全实现了,不过还有多很不足之处没有解决。background活动问题,展现形式都不太好,不过大伙可根据现有的代码去修改。

源码地址

https://github.com/TianLiangZhou/loocode-example/tree/master/chrome-plugin-image-source

下载地址

http://backend.loocode.com/upload/20171103/chrome-plugin-image-source.zip

推荐阅读

  1. https://developer.chrome.com/extensions/getstarted
  2. https://developer.chrome.com/extensions/api_index
  3. http://open.chrome.360.cn/extension_dev/overview.html
  4. https://developer.chrome.com/extensions/samples
  5. https://developer.chrome.com/extensions/manifest
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin