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 // @namespace http://blog.csdn.net/KEYTOME // @author anony // @developer anony // @contributor // @description XXX // @match http://vod.xunlei.com/* // @run-at document-idle // @version 0.1 // ==/UserScript==
match里比较重要的，它让用户脚本针对某个站点或某个页面注入。
// ==UserScript==
// @name XXXInVodXunLei
// @namespace http://blog.csdn.net/KEYTOME
// @author ANONY
// @developer ANONY
// @contributor
// @description XXX vod.xunlei.com
// @match http://vod.xunlei.com/*
// @run-at document-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入门，见笑。