今天早上尝试开发一个chrome插件
首先 我们需要建立一个文件夹 名字随便取 我的就叫BaiduNoAd
然后 在里面 建立一个 文件 manifest.json 它其实就是一个json格式的文本
{ "manifest_version": 2, "name": "百度广告屏蔽", "version": "1.0", "description": "白强", "background": { "scripts": ["background.js"] }, "permissions": [ "http://www.baidu.com/" ], "browser_action": { "default_icon": "bq.png", "default_popup": "popup.html" } }
解释一下 manifest_version是
用整数表示manifest文件自身格式的版本号。从Chrome 18开始，开发者应该（不是必须，但是2012年底左右就必须了）指定版本号为2（没有引号），如下所示：
"manifest_version": 2
name version description就不解释了
background “background”许可让Chrome继续运行脚本(即使最后关闭窗口),直到用户显式地退出浏览器。
permissions 是一个数组 里面就是 可以执行的网站权限
扩展或app将使用的一组权限。每个权限是一列已知字符串列表中的一个，如geolocatioin或者一个匹配模式，来指定可以访问的一个或者多个主机。一些权限在安装之前，会告知用户，具体参考：Permission Warnings.
brower_action 也是一个数组
其中的default_icon是展示在chrome上的图标 default_popup是点击图标之后默认弹出的页面
首先是一个popup.html它就是一个普通的html文件如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> @-webkit-keyframes border { from { border: #749a02 1px solid; } 50% { border: #d45500 1px solid; } to { border: #749a02 1px solid; } } @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; } 50% { background-color: #91bd09; -webkit-box-shadow: 0 0 18px #91bd09; } to { background-color: #749a02; -webkit-box-shadow: 0 0 9px #333; } } INPUT { border: #fff 1px solid; margin: 10px 0px 10px 10px; padding-left: 10px; float: left; font-size: 1em; line-height: 1.5em; height: 25px; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: border; -webkit-animation-duration: 3s; } .btn { background: #222 url(btn.png) repeat-x 0 0; display: inline-block; color: #fff !important; line-height: 1; text-decoration: none; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25); border: 1px solid rgba(0, 0, 0, 0.25); position: relative; cursor: pointer; background-position: left bottom; -webkit-border-radius: 3px; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-name: greenPulse; -webkit-animation-duration: 3s; } .btn:hover { background-color: #007d9a; } </style> </head> <body> <form action="http://www.baidu.com/baidu" target="_blank"> <table> <tr> <td> <input name=tn type=hidden value=baidu> <a href="http://www.baidu.com/"> <img src="http://img.baidu.com/img/logo-80px.gif" alt="Baidu" align="bottom" border="0"> </a> <input type=text name=word size=30> <input type="submit" class="btn" value="百度搜索"> </td> </tr> </table> </form> </body> </html>
接下来就看一下background.js是怎么个内容
function InsertFunc(tabId, changeInfo, tab) { chrome.tabs.executeScript(tabId, { file: "main.js" }); } chrome.tabs.onUpdated.addListener(InsertFunc); chrome.tabs.onSelectionChanged.addListener(InsertFunc);
它的意思是让chrome在浏览器做自发更新的时候或是标签页切换的时候执行main.js ，写法的参数就是那样
其他还有些
chrome.tabs.onCreated是在创建一个标签页的时候触发
chrome.windows.onFocusChanged是在窗口重新获得焦点的时候触发
chrome.tabs.onRemoved是在标签关闭的时候触发
它们的参数都是function
接下来就是主要的main.js 它可以动态修改页面属性
(function () { var right = document.getElementById('content_right'); var results = document.getElementsByClassName('result'); var ads = document.getElementsByTagName('table'); for (var i = 0; i < ads.length; i++) { ads[i].style.display = 'none'; } for (var j = 0; j < results.length; j++) { results[j].style.width = '800px'; } if (right) { right.style.display = 'none'; } window.setTimeout(arguments.callee, 500); })();
匿名自调函数 每过500ms 执行一次自己 检查是否有以上css属性 并修改之
这样插件就开发完了，文件结构如下
然后打开 chrome->工具->扩展程序->加载正在开发的程序->选择你的文件夹即可
实现的效果如下：
未用插件
用了插件
--------------------------------------------------------------------------
简单的开发。。。
最后附上源码