Chrome 插件开发记录

由于是学习记录,不作为教程,所以不详细讲解,只记录核心部分

一般插件需要的列表:

  • manifest.json - 插件的配置文件,插件程序的入口。
  • icon.png - 小图标,推荐使用19*19的半透明png,更好的做法是同时提供一张38*38的半透明的png作为大图标。
  • popup.html - 点击插件图标时弹出页面。
  • popup.js - 弹出页面所引用的javascript文件。

manifest.json:

 1 {
 2         "name": "My Extension",   //插件名称
 3         "version": "versionString",  //插件版本号
 4         "description": "A plain text description",   //插件功能描述
 5         "icons": { ... },  //图片,一般需要三种不同分辨率的图片:16*16 48*48 128*128
 6         "default_locale": "en",     //支持国际化
 7         "browser_action": {        //插件动作配置
 8                      "default_icon": "icon16.png", // 可选
 9                      "default_title": "Google Mail", // 可选,shown in tooltip
10                      "default_popup": "popup.html" // 可选
11          },
12         "page_action": {
13                         "default_icon": {
14                                                  "19": "cnblogs_19.png",
15                                                  "38": "cnblogs_38.png"
16         },
17         "default_title": "cnblogs.com article information"},
18         "theme": {...},
19         "app": {...},
20         "background_page": "aFile.html",
21         "chrome_url_overrides": {...},    //替换页
22         "content_scripts": [...],
23         "homepage_url": "http://path/to/homepage",
24         "incognito": "spanning" or "split",
25         "key": "publicKey",
26         "minimum_chrome_version": "versionString",
27         "omnibox": { "keyword" : "aString" },
28         "options_page": "aFile.html",     //选项的配置页
29         "permissions": [...],    //权限这里很重要,需要使用标签页、window等的要在这里配置权限
30         "plugins": [...],      //和dll交互的时候需要在这里配置
31         "update_url": "http://path/to/updateInfo.xml"
32 }

HTML文件:

  background.html主要是运行在后台,它在插件的生命周期中都存在,比如:你可以将一些持久的数据放到到背景页中,当需要的时候可以从背景页中得到。需要注意的是,使用了background.html,需要在manifest.json文件中要配置“background_page”:background.html。

popup.html是单击chrome浏览器右上角任务栏中或者是地址栏的插件图标时弹出的页面,假如你有单击图标弹出气泡提示的需求,就可以在popup.html上下功夫。同样使用了popup.html就需要在manifest.json文件中要配置:

1 "browser_action": {
2     "default_icon": "icon16.png",
3     "default_title": "cnblogs",
4     "default_popup": "popup.html"
5   },

JS文件:

  background :可以把它认为是chrome插件的主程序,理解这个很关键,一旦插件被启用(有些插件对所有页面都启用,有些则只对某些页面启用),chrome就给插件开辟了一个独立的javascript运行环境(又称作运行上下文),用来跑你指定的background script。

配置方法:

"background": { "scripts": ["background.js"] }

  content_scripts:就是要注入到页面中的脚本,能访问DOM的内容,主要用于获取和修改页面的内容。默认情况下,它在网页加载完了和页面脚本执行完了,页面转入空闲的情况下运行,但这个是可以改变的。

配置方法:

"content_scripts": [
    {
      "js": [ "content_script.js" ]
    }]

由于Content Script和Background Script处于不同的运行环境中,所以不能直接互相访问,那它们之间通信就通过Message。例如:

Content Script获取网页信息通过chrome.runtime.sendMessage(msg).

Background Script通过chrome.runtime.onMessage.addListener(function (request, sender, sendRequest) {}))获取传递的信息;

详细资料请查阅官方的资料:https://developer.chrome.com/extensions/index.html

时间: 2024-10-08 22:04:52

Chrome 插件开发记录的相关文章

chrome插件开发记录(1)——解决问题“清单文件缺失或不可读”

清单文件即为mainfest.json文件,这是我的mainfest.json文件内容: 这是加载的文件夹里的设置: 刚开始找了很久没找到解决办法,后来是看到StackOverFlow有个人解答的: " My problem was slightly different. By default Eclipse saved my manifest.json as an ANSI encoded text file. Solution: Open in Notepad File -> Save

【Chrome】Chrome插件开发(一)插件的简单实现

不同浏览器插件开发比较 Chrome的插件开发起来最简单,总体上看没什么新的技术,开发语言就是javascript,web前端工程师能很快上手. Firefox的插件开发则复杂许多,涉及到环境的搭建和一些WEB以外的技术. IE的插件开发就更复杂了,需要熟悉C++和COM技术,当然还要装微软的Visual Studio. 这里有篇老外写的文章,对比Chrome.Opera和Firefox的插件开发的:http://blog.nparashuram.com/2011/10/writing-brow

vue.js 初体验— Chrome 插件开发实录

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个

Chrome插件开发入门(二)——消息传递机制

Chrome插件开发入门(二)——消息传递机制 由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一个自己写过的demo,基本就对消息传递能够熟悉了. 在开发 Chrome 扩展时经常需要在页面之间进行通讯,比如 background 与 content script 之间,background 与 popup 之间等等,本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现. 一

Chrome插件开发 小插件-acfun看图 1

之前在acfun看文章,经常遇到别人发其他网站的图而导致无法看到.这很不好,而且要想看到这些图片,操作是获得图片地址后,将最后的jpg改为jpeg即可,这种简单的操作应该是很容易实现的,于是我要开发一个简单的小插件来方便自己看评论.... 首先,先介绍一下开发的原因,在acfun下的评论中有时候会有一些其他人发的图片,这些图片由于是从自己的网盘或者空间发出来的,类似百度,会被屏蔽,出现 一般的解决方法是获得其图片地址后,在新的页面打开,将最后的jpg后缀改为jpeg,然后就可以看到图片了. 然后

chrome插件开发入门

1.参考文档链接 chrome浏览器插件开发官网教程 https://developer.chrome.com/extensions/getstarted foege工具,能够使用一份代码同时生成firfox,chrome,ie的插件,但是目前该项目已经不再维护 http://legacy-docs.trigger.io/en/v1.4

提醒我喝水chrome插件开发指南

起因 因为最近工作比较忙,经常忘记了喝水.作为一名前端开发人员,面对着浏览器工作是常态.所以这里为了解决这个痛点,面向前端开发人员写了一款浏览器插件.他的作用就是提醒喝水. 这里将半个小时设置为一个周期,大概和番茄工作法的原理一样.基本上集中注意力半个小时人也就累了.这个时候喝口水,舒缓一下紧张的神经.也作为一个休息的周期.为我们的工作继续高效的进行奠定了节奏. 成果 这是我做的浏览器插件 插件下载地址 开发思路 下面顺道介绍一下浏览器插件开发思路,编程不光要求理论还要有实践,撸起袖子直接干.

Chrome插件开发 小插件-acfun看图 3

插件的安装与使用. 写好插件后,通过chrome开发者模式加载插件. 点击加载扩展程序,选择插件的文件夹即可在chrome中加载插件. 然后更改自己的插件后点刷新进行更新,如果有错误,chrome会报错. 要想发布自己的插件就要先交钱,这跟steam上的绿光,以及ios应用等等都一样. 全部: ACfun看图

google chrome插件开发,自己动手,丰衣足食

因为平时上网都用chrome,但总感觉除了速度快,简洁以外总还有地方满足不了我的需要,然后找插件…后来发现,插件虽然海量但找个称心如意的也不是件容易的事儿,用在找插件的时间都能自己写一个了,于是,今年夏天开始的闲暇时间也写了几个,然后在应用中心断断续续发布了,这些插件原本是给自己用的,但也有几个用户专门找我提出了他们的需求. 从开始的不懂到现在三两下就能玩儿一个,走了点远路,今天在这里写下从开发到发布的简单流程,都是很简单的知识 一个可用的插件至少包括一个manifest.json和一个js文件