JavaScript用武之Google Chrome Extension & User Script

Google Chrome Extension
1. 可供查看的文档

Google Extension的官方文档，

https://developer.chrome.com/extensions/index.html

详尽的说明，大量的例子，详尽的chrome API。

国内有拿chromium开源project来开发的360极速浏览器，它的技术文档：

http://open.chrome.360.cn/extension_dev/overview.html

不过，和Google官方的有差。

开发Google Chrome Extension需要从“扩展程序”页面加载进去，

在还没有打包成.crx档并提交之前，做为开发中的扩展只能这样才可以“安装”到Chrome上，因为其它途径的安装方法被Google禁止了，要么等开发完成后提交到HOST上去，才能从Google Web Store上下载安装。

1. 随便建个文档夹，里面放个manifest.json文档，按Google的要求，填入必要的json信息,如

{"manifest_version": 2,"name": "Test","description": "This extension demonstrates a browser action with kittens.","version": "0.1","permissions": ["https://vod.xunlei.com/","notifications"],"browser_action": {"default_icon": "icon.png","default_popup": "popup.html"}}

2. 为"browser action"加上popup页面，如popup.html:

在popup.html里引用javascript文件，即所谓的"content script"，如popup.js:

var notification = webkitNotifications.createNotification(  'images/icon_48d.png',  // icon url - can be relative  'Hello!',  // notification title  'It is a test.'  // notification body text);notification.show();

点图标时，"Desktop Notification"就出来了，当然这里只是演示罢鸟。

一个简单的HelloWorld也没多少东西需要写，如下，

这个HelloWorld是"browser action"，即那个图标随时都在，其它还有"Page Action"，只有到某些网站的时候才出现，如：AdBlock等，

有“广告”时才会出现，并运行后台的content script，改变网页里DOM树。

另外，根据Google Chrome Extension开发文档的说明，你可以通过下面的方式来查看你已经安装的别人写的扩展，以此来进行学习。

As you might notice while you use the Google Chrome debugger, every file in an extension is also 

accessible by an absolute URL like this:

chrome-extension://<extensionID>/<pathToFile>

如：chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/manifest.json查Adblock Plus的配置

{   "background": {      "scripts": [ "lib/compat.js", "lib/io.js", "lib/adblockplus.js", "lib/punycode.js", "lib/publicSuffixList.js", "lib/basedomain.js", "lib/sha1.js", "lib/jsbn.js", "lib/rsa.js", "webrequest.js", "popupBlocker.js", "background.js" ]   },   "content_scripts": [ {      "all_frames": true,      "js": [ "include.preload.js" ],      "matches": [ "http://*/*", "https://*/*" ],      "run_at": "document_start"   }, {      "all_frames": true,      "js": [ "include.postload.js" ],      "matches": [ "http://*/*", "https://*/*" ],      "run_at": "document_end"   } ],   "default_locale": "en_US",   "description": "__MSG_description__",   "icons": {      "128": "icons/abp-128.png",      "16": "icons/abp-16.png",      "19": "icons/abp-19.png",      "32": "icons/abp-32.png",      "48": "icons/abp-48.png"   },   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCxGWIIBRUVzQIXITqE6+js1FA24fsZC58G0fxcO1Duwfps+9gip5tedTziErKEpeAQVkgasdT4kk+b6Lw27yp3oysAj6zD9j+j4W+EMArTXqMIc6SMYD7Z8bPcwPb3tC1MUxMSpO6oOVpFE23UhKe91SYnrK92nHI2cmsor5elXQIDAQAB",   "manifest_version": 2,   "minimum_chrome_version": "18.0",   "name": "__MSG_name__",   "options_page": "options.html",   "page_action": {      "default_icon": "icons/abp-19.png",      "default_popup": "popup.html",      "default_title": "__MSG_name__"   },   "permissions": [ "tabs", "http://*/*", "https://*/*", "contextMenus", "webRequest", "webRequestBlocking", "webNavigation", "unlimitedStorage" ],   "update_url": "https://clients2.google.com/service/update2/crx",   "version": "1.4.1",   "web_accessible_resources": [ "block.html" ]}

==========================================================================================!!

User Script

如著名的12306用户脚本。

方法和Extension的

{  "name": "My extension",  ...  "background": {    "scripts": ["background.js"]  },  ...}

作用差不多，从用javascript实现 ，js文件必须命名为: ***.user.js，拖到“扩展程序”页面的时候Chrome才会接受（不对吗？我不太清楚，请指出，thanks）。

去看下大牛们写的用户脚本你就可以学到怎么注入DOM了，我有看到Google+上有人为G+写了很多用户脚本，大家不妨前去学习一下。

话说, 用户脚本里面：

// ==UserScript==// @name XXXVodXunLei// @namespacehttp://blog.csdn.net/KEYTOME// @authoranony// @developeranony// @contributor// @descriptionXXX// @matchhttp://vod.xunlei.com/*// @run-atdocument-idle// @version 0.1// ==/UserScript==

match里比较重要的，它让用户脚本针对某个站点或某个页面注入。

// ==UserScript==// @name XXXInVodXunLei// @namespacehttp://blog.csdn.net/KEYTOME// @authorANONY// @developerANONY// @contributor// @descriptionXXX vod.xunlei.com// @matchhttp://vod.xunlei.com/*// @run-atdocument-idle// @version 0.1// ==/UserScript==var isChrome = navigator.userAgent.indexOf("AppleWebKit") != -1;var hideId1 = document.getElementById("login_box");var hideId2 = document.getElementById("bgMask");var showInfo = document.getElementById("notice_layer");var xmlhttp;function getPreRespons() {if(xmlhttp.readyState==4 && xmlhttp.status==200) {showInfo.style.display="block";showInfo.innerHTML = xmlhttp.responseText;}}function arequest() {if(window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();} else {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = getPreRespons;xmlhttp.open("GET", "http://vod.xunlei.com/help.html", true);xmlhttp.send();}if(isChrome){entryPoint();}function entryPoint() {hideId1.style.display = "None";hideId2.style.display = "None";//arequest();}

像针对12306的user script，包含大量append去注入新的DOM元素，很多的事件响应，异步请求等待，大家可以用这样的方式来学习javascript。

本人js入门，见笑。