chrome插件编写基本入门
chrome插件编写基本入门
作为一名程序猿,怎么能不会写chrome插件呢[笑]
所以今天就教教大家怎么写最基本的chrome插件,不对,确切地说是互相学习一起学习。
(我是不会告诉你说我也是刚学会没多久的!)
基础知识:
首先,我们要知道一个 chrome插件需要哪些文件
其实很简单
- 配置(入口)文件 manifest.json
- xx.html
- xx.css
- xx.js
- 图片
这就OK了,如果再看这篇文章的你 是一位前端攻城狮、程序猿,那么恭喜你,你的学习难度会很小分分钟的事情,很容易就能学会(当然我指的是基础,最基本的写法)
由于 html、css、js 及文件组织,跟普通的 web 开发一样,那写 Chrome 扩展主要就是 manifest 文件的编写和扩展的调试了
manifest.json
基本属性
包括扩展的名称(name)、版本(version)、描述(description)、图标位置(icons)和 manifest 版本(manifestversion)等信息。
name、version 和 manifestversion 是必须的,而且 manifest_version 必须为 2(别问我为啥是2,我也不知道)
举个栗子:
- {
- //这是必须的
- "name": "coding冒泡点赞狂魔",
- "manifest_version": 2,
- "version": "1.0",
- //这是可选的
- "description": "coding点赞脚本"
- }
Markup- {
browser_action
browseraction指定扩展的图标放在Chrome工具栏中,它定义了扩展图标文件位置(defaulticon)、悬浮提示(defaulttitle)和点击扩展图标所显示的页面位置(defaultpopup)
用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展,一个browser action图标还可以有tooltip、badge和popup。
如果你想创建一个不总是可见的图标, 可以使用page action来代替browser action.举个栗子
- {
- ...
- "browser_action": {
- "default_icon": "1.png",
- "default_title": "我是点赞狂魔",
- "default_popup": "popup.html"
- },
- ...
Markup}
- {
permissions
这个牛逼了,比较重要的permissions 属性是一个数组,它定义了扩展需要向 Chrome 申请的权限,比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡(tabs)、获取当前活动选项卡(activeTab)、浏览器通知(notifications)、存储(storage)等,可以根据需要添加。
扩展或app将使用的一组权限。每个权限是一列已知字符串列表中的一个,如geolocatioin或者一个匹配模式,来指定可以访问的一个或者多个主机。权限可以帮助限定危险,如果你的扩展或者app被攻击。一些权限在安装之前,会告知用户
如果一个扩展api需要你的声明一个权限在manifest文件,一般的,api的文档将告诉怎么做。例如,Tabs页面告诉你这么声明一个tabs权限。
这是一个扩展的manifest文件的权限设置的一部分。举个栗子
- {
- ...
- "permissions": [
- "tabs",
- "bookmarks",
- "http://www.blogger.com/",
- "http://*.google.com/",
- "unlimitedStorage",
- ...
- ],
- ...
- }
Markup- {
background
扩展常常用一个单独的长时间运行的脚本来管理一些任务或者状态。
background 可以使扩展常驻后台,比较常用的是指定子属性 scripts,表示在扩展启动时自动创建一个包含所有指定脚本的页面。举个栗子
{ ... "background": { "scripts": ["myscript.js"] }, ... }content_scripts
Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。
举个栗子
{ ... "content_scripts": [ { "matches": ["https://coding.net/*"], // 这是必须项 "js": ["jquery.min.js"], // 这是可选 "css": ["xx.css"], // 这是可选 ... } ] ... }使用 contentscripts 字段,一个扩展可以向一个页面注入多个contentscript脚本;每个content script脚本可以包括多个javascript脚本和css文件。
简单的说content_scripts会根据你在它内部定义的 matches规则 去匹配url,然后在匹配成功的url页面中注入 你指定的js和css等
好了, 学会这些之后,你就能做一个简单的 chrome插件了,有一点要注意content scripts是打开页面后直接注入你可以不需要background和permissions,而如果你想点击你的插件图标再执行注入的话你就必须使用background和permissions 将代码注入页面,扩展必须具有cross-origin 权限, 还必须可以使用chrome.tabs模块。 可以通过在manifest文件的permissions字段里声明来取得这些权限。一旦设置好了权限,就可以通过调用executeScript()来注入javascript脚本。如果要注入css,可以调用insertCSS()。
举个栗子
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{code:"document.body.bgColor='red'"}); });
这样 你就可以点击图标之后把对应网页的背景色变成红色
然而,有时候我们的代码可能会比较多,直接写在executeScript()中不美观,那么我们就可以新建一个文件
举个栗子
/* action.js */ document.body.bgColor='red'; alert('已改变背景色');
/* main.js */ chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"action.js"}); });
总结
最后我们来总结一下上面所学习的部分,把所有代码整合到一起,就拿我的一个简单的基本插件为例:
目录结构:
---- 插件文件夹
-------- manifest.json
-------- jquery.min.js
-------- like.js
-------- myscript.js
manifest.js
{ "name": "coding冒泡点赞狂魔", "manifest_version": 2, "version": "1.0", "description": "coding点赞脚本", "browser_action": { "default_icon": "1.png" "default_title": "我是点赞狂魔" }, "permissions": [ "tabs", "https://coding.net/*" ], "background": { "scripts": ["myscript.js"] }, "content_scripts": [ { "matches": ["https://coding.net/*"], "js": ["jquery.min.js"] } ] }
myscript.js
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"like.js"}); });
like.js
jQuery('.heart.icon.empty').click(); console.log('已点赞'); console.log(jQuery('.heart.icon.empty').click()); alert('已点赞 '+ jQuery('.heart.icon.empty').click().length + '条');
参考链接
chrome插件编写基本入门的更多相关文章
- chrome插件编写之新版hello world
编写chrome插件之前,需要熟悉一下相应的chrome插件开发环境.从编写hello world开始,参考阅读官方的教程,是一个不错的选择.这里主要是基于chrome的官方教程,稍稍做了一些修改和扩 ...
- 关于chrome插件编写的小结
一个插件的大致目录结构如下: 其中manifest文件最为重要,它定义/指明插件应用的相关信息(权限.版本.功能说明等),点此查看Manifest的详情>> 这里有一篇chrome官方 ...
- Chrome 插件编写日记
Chrome 插件,你可以理解为打开了一个网页,但是里面只有前端语言,JavaScript, HTML + css 但是有一点区别的是,它是有一个名字为 manifest.json 的配置文件的,里面 ...
- chrome插件编写中需要了解的几个概念和一些方法
1.插件文件结构 1.1.manifest.json 每一个扩展.可安装的WebApp.皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息. 一个最基本的配置例子: { &q ...
- 我的项目:一个chrome插件的诞生记,名字叫jumper
选课是个问题,为了选课,便有了以下的故事. 最开始,萌生想法于2013年7月. 接着网上了解了chrome的结构知识,却发现例子是假的. 幸好有之前师兄的一个同功能插件开源,但代码写得很乱,我喜欢逻辑 ...
- 写个简单的chrome插件-京东商品历史价格查询
说chrome插件编写的先关文章, 首推小茗的[干货]Chrome插件(扩展)开发全攻略. 有非常完善的理论,引用和demo代码. 但是还是建议看官方的 chrome extensions. chro ...
- 能说会道爱办公——“别人家的”Chrome插件到底怎么做
根据相关数据显示,谷歌的Chrome浏览器目前已达近七成的市场占有率,成为浏览器的"霸主".大家选择Chrome,除了是因为性能的优越以及强大的兼容性之外,Chrome充足的扩展插 ...
- Gulp:插件编写入门
之前挖了个坑,准备写篇gulp插件编写入门的科普文,之后迟迟没有动笔,因为不知道该肿么讲清楚Stream这货,毕竟,gulp插件的实现不像grunt插件的实现那么直观. 好吧,于是决定单刀直入了.文中 ...
- 教你编写百度搜索广告过滤的chrome插件
1 前言 目前百度搜索列表首页里,广告5条正常内容是10条,而且广告都是前1到5条的位置,与正常内容的显示样式无异.对于我们这样有能力的开发者,其实可以简单的实现一个chrome插件,在百度搜索页面里 ...
随机推荐
- Code Fragment-UI加载策略之-可视者优先加载
通常情况 通常程序的UI不太复杂,我们会直接加载这些UI信息 复杂的UI 加载的元素就相对多一些. 加载的数据相对多. 因为UI元素和数据元素都比较多,加载的时间相对多. 可视者优先加载 不是默认的加 ...
- perl解析xml-XML::Simple/XMLin
转自: http://blog.charlee.li/perl-xml-simple/ [Perl]用XML::Simple解析XML文件 在Perl中解析XML的方法最常见的就是使用 XML::DO ...
- effective C++ 读书笔记 条款08
条款08 别让异常逃离析构函数: 假设在析构函数其中发生了异常,程序可能会过早结束或者导致不明白行为(异常从析构函数传播出去) 看代码: #include <iostream> usin ...
- [Node.js]操作mysql
摘要 上篇文章介绍了node.js操作redis的简单实例,这里介绍如何操作mysql. 安装 安装mysql模块 cnpm install mysql 一个例子 新建一个mysql.js的文件,代码 ...
- read(10, "NTP0 13690\n", 64) 数据库登录缓慢
初步怀疑:下面两个參数引起: SQL> conn / as sysdba Connected. SQL> show parameter lock NAME ---------------- ...
- arcgispro加字段,字段修改
- runOnUiThread更新主线程
更新UI采用Handle+Thread,需要发送消息,接受处理消息(在回调方法中处理),比较繁琐.除此之外,还可以使用runOnUiThread方法. 利用Activity.runOnUiThre ...
- [ACM] HDU 2255 奔小康赚大钱 (二分图最大权匹配,KM算法)
奔小康赚大钱 Problem Description 传说在遥远的地方有一个很富裕的村落,有一天,村长决定进行制度改革:又一次分配房子. 这但是一件大事,关系到人民的住房问题啊. 村里共同拥有n间房间 ...
- 并查集(Union-Find) 应用举例 --- 基础篇
本文是作为上一篇文章 <并查集算法原理和改进> 的后续,焦点主要集中在一些并查集的应用上.材料主要是取自POJ,HDOJ上的一些算法练习题. 首先还是回顾和总结一下关于并查集的几个关键点: ...
- tomcat server.xml maxPostSize=0 导致 果post表单收不到参数解决方案