chrome插件编写中需要了解的几个概念和一些方法

来源:互联网 发布:苹果修复微信闪退软件 编辑:程序博客网 时间:2024/06/06 07:03
 
chrome插件编写中需要了解的几个概念和一些方法
本文由arthinking发表于2年前 | Javascript | 评论数 1 |  被围观 5,926 views+
1、插件文件结构1.1、manifest.json1.2、popup1.3、background page1.4、Content scripts2、文件之间的交互3、为web页面注入JS(Content scripts)文件:
1、插件文件结构
1.1、manifest.json

每一个扩展、可安装的WebApp、皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息。

一个最基本的配置例子:

{    "name": "browser action demo",    "version": "1.0",    "permissions": [        "tabs", "http://*/*", "https://*/*"    ],    "browser_action": {        "default_title": "开关灯",        "default_icon": "icon.png",        "default_popup": "popup.html"    },    "background": {        "page": "background.html"      },    "manifest_version": 2}
1.2、popup

插件的弹窗,上面配置中的browser_action中default_popup就是这个页面。

1.3、background page

绝大多数应用都包含一个背景页面(background page),用来执行应用的主要功能。

1.4、Content scripts

通过content script可以使应用和web页面交互,content script是指能够在浏览器已经加载的页面内部运行的Javascript脚本。可以将content script看做是网页的一部分,而不是它所在的应用的一部分。

2、文件之间的交互

popup弹窗中可以直接调用背景页面中的函数。

Content script可以读取并修改当前web页面的dom树,但是它并不能修改它所在应用的背景页面(background)的dom树。

Content script与应用之间的交互:可以互相发送消息

3、为web页面注入JS(Content scripts)文件:

方法一,在manifest.json文件中配置:

"content_scripts": [    {      "matches": ["http://www.google.com/*"],      "css": ["mystyles.css"],      "js": ["jquery.js", "myscript.js"]    }  ],

方法二,通过executeScript():

向页面注入JavaScript 脚本执行。

chrome.tabs.executeScript(integer tabId, object details, function callback)
chrome.tabs.executeScript(tabId, {file: "func.js", allFrames: true});
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/chrome-plug-in-writers-need-to-understand-a-few-concepts-and-some-of-the-ways.html
关键字: Chrome, 插件
arthinking指弹吉他 && 技术more

0 0