JavaScript用武之Google Chrome Extension & User Script

最新推荐文章于 2024-07-29 10:28:03 发布

test27

最新推荐文章于 2024-07-29 10:28:03 发布

阅读量3.9k

点赞数

分类专栏：杂

本文链接：https://blog.youkuaiyun.com/ooaven/article/details/8996797

版权

杂专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用Google Chrome扩展API创建浏览器扩展，包括基本组件、manifest文件配置、内容脚本注入及用户脚本应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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.youkuaiyun.com/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入门，见笑。