chrome插件编写中需要了解的几个概念和一些方法
本文由发表于4年前 | Javascript | 评论数 1 |  被围观 11,502 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
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2013 6/5
文章评论
    一条评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Android工程目录结构的说明 创建工程 AndroidManifest.xml 2011/7/12
2 微型计算机技术实用知识点编程应用题 2011/6/30
3 Hibernate一对多关联映射的配置及其级联删除问题 2011/5/26
4 配置Maven项目自动编译 2014/12/9
5 二叉树的前序遍历、中序遍历和后序遍历及其算法 2011/5/19
6 总体设计-模块化 层次图 结构图 2011/7/1
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.