chrome扩展开发学习笔记

早就想写一个chrome浏览器插件了,可是一直耽于其他的事情.这两天终于空出时间来学习如何写一个入门的chrome浏览器插件(chrome扩展)了.
写浏览器插件语言使用的是javascript和HTML,这对前端人员来说无疑很有优势啊.
1、目录结构
我的目录如下图:

下面我解释一下:
manifest.json是一些配置信息;
其中popup.html是点击图标默认显示的页面;
popup.js是popup.html页面所需要的脚本文件,因为popup.html页面中不能直接使用内联脚本;
icon.png是插入工具栏的图片(至于以什么形式根据业务需求);
js文件里放置的是manifest.json配置文件里的content_scripts所依赖的文件,是要加入到使用扩展的页面的。
2、原理
学习的时候,我特别爱问原理,觉得会了原理,似乎其他的都能举一反三了,下面也讲解一下扩展程序使用的原理吧。
原理:
(a)、扩展程序的弹出页面popup.html(或者其他你配置的扩展程序本身的页面)能够获取、使用chrome浏览器大部分的API。
摘抄如下图:

(b)、扩展程序也能注入脚本到使用扩展的页面,这样就能获取、操作使用扩展的页面的DOM。
content_scripts里配置的脚本是注入使用扩展程序的页面的脚本,即脚本如果需要注入到使用扩展的页面需要在manifest.json配置文件中的content_scripts选项里配置。而这些content_scripts(叫做内容脚本),注入使用扩展的页面的位置是可以定义的使用”run_at”选项配置.
(c)扩展程序与使用扩展的页面是可以通信的,双方的通信基于chrome提供的API:
chrome.tabs.sendRequest(integer tabId, any request, function responseCallback)使用扩展的页面向扩展程序发送消息—–>会触发扩展程序的接收消息事件chrome.extension.onRequest.addListener(function(request, sender, sendResponse){})
而通过回调函数完成信息交互之后的操作。
3、小例子
写了一个小的demo,功能是:
(1)根据class选择器查询到所有的innerText及href信息;
(2)显示/隐藏书签栏
点击查看demo源码

参考文章:
Chrome扩展全部API

此条目发表在成长, 数据库分类目录。将固定链接加入收藏夹。

2 则回应给 chrome扩展开发学习笔记

  1. 赞赞 ,前端写这个真是天然优势!

发表评论

电子邮件地址不会被公开。 必填项已用*标注