chrome插件扩展脚本开发03

系列文章目录

01_插件文件、类型介绍
02_消息通信

---

---

一、动态注入或执行JS

• 虽然在background和popup中无法直接访问页面DOM，但是可以通过chrome.tabs.executeScript来执行脚本，从而实现访问web页面的DOM（注意，这种方式也不能直接访问页面JS）。
• 示例manifest.json配置：

  {
  	"name": "动态JS注入演示",
  	...
  	"permissions": [
  		"tabs", "http://*/*", "https://*/*"
  	],
  	...
  }
  

• JS：

  // 动态执行JS代码
  chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
  // 动态执行JS文件
  chrome.tabs.executeScript(tabId, {file: 'some-script.js'});
  

---

二、动态注入CSS

• 示例manifest.json配置：

  {
  	"name": "动态CSS注入演示",
  	...
  	"permissions": [
  		"tabs", "http://*/*", "https://*/*"
  	],
  	...
  }
  

• JS代码：

  // 动态执行CSS代码，TODO，这里有待验证
  chrome.tabs.insertCSS(tabId, {code: 'xxx'});
  // 动态执行CSS文件
  chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});
  

---

三、获取当前窗口ID

chrome.windows.getCurrent(function(currentWindow)
{
	console.log('当前窗口ID：' + currentWindow.id);
});

---

四、获取当前标签页ID

• 方法一:

  // 获取当前选项卡ID
  function getCurrentTabId(callback)
  {
  	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
  	{
  		if(callback) callback(tabs.length ? tabs[0].id: null);
  	});
  }
  

• 方法二：

  // 获取当前选项卡ID
  function getCurrentTabId2()
  {
  	chrome.windows.getCurrent(function(currentWindow)
  	{
  		chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs)
  		{
  			if(callback) callback(tabs.length ? tabs[0].id: null);
  		});
  	});
  }
  

• 大部分时候都类似，只有少部分时候会不一样（例如当窗口最小化时）

---

五、本地存储

• 本地存储建议用chrome.storage而不是普通的localStorage，区别有好几点，个人认为最重要的2点区别是：
  1. chrome.storage是针对插件全局的，即使你在background中保存的数据，在content-script也能获取到；
  2. chrome.storage.sync可以跟随当前登录用户自动同步，这台电脑修改的设置会自动同步到其它电脑，很方便，如果没有登录或者未联网则先保存到本地，等登录了再同步至网络；
• 需要声明storage权限，有chrome.storage.sync和chrome.storage.local2种方式可供选择，使用示例如下：

  // 读取数据，第一个参数是指定要读取的key以及设置默认值
  chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
  	console.log(items.color, items.age);
  });
  // 保存数据
  chrome.storage.sync.set({color: 'blue'}, function() {
  	console.log('保存成功！');
  });
  

---

六、webRequest

• 通过webRequest系列API可以对HTTP请求进行任性地修改、定制，这里通过beforeRequest来简单演示一下它的冰山一角：

  //manifest.json
  {
  	// 权限申请
  	"permissions":
  	[
  		"webRequest", // web请求
  		"webRequestBlocking", // 阻塞式web请求
  		"storage", // 插件本地存储
  		"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
  		"https://*/*" // 可以通过executeScript或者insertCSS访问的网站
  	],
  }
  
  
  // background.js
  // 是否显示图片
  var showImage;
  chrome.storage.sync.get({showImage: true}, function(items) {
  	showImage = items.showImage;
  });
  // web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlocking
  chrome.webRequest.onBeforeRequest.addListener(details => {
  	// cancel 表示取消本次请求
  	if(!showImage && details.type == 'image') return {cancel: true};
  	// 简单的音视频检测
  	// 大部分网站视频的type并不是media，且视频做了防下载处理，所以这里仅仅是为了演示效果，无实际意义
  	if(details.type == 'media') {
  		chrome.notifications.create(null, {
  			type: 'basic',
  			iconUrl: 'img/icon.png',
  			title: '检测到音视频',
  			message: '音视频地址：' + details.url,
  		});
  	}
  }, {urls: ["<all_urls>"]}, ["blocking"]);
  

---

七、国际化

• 插件根目录新建一个名为_locales的文件夹，再在下面新建一些语言的文件夹，如en、zh_CN、zh_TW，然后再在每个文件夹放入一个messages.json，同时必须在清单文件中设置default_locale。
• _locales\en\messages.json内容：

  {
  	"pluginDesc": {"message": "A simple chrome extension demo"},
  	"helloWorld": {"message": "Hello World!"}
  }
  

• _locales\zh_CN\messages.json内容：

  {
  	"pluginDesc": {"message": "一个简单的Chrome插件demo"},
  	"helloWorld": {"message": "你好啊，世界！"}
  }
  

• 在manifest.json和CSS文件中通过__MSG_messagename__引入，如：

  {
  	"description": "__MSG_pluginDesc__",
  	// 默认语言
  	"default_locale": "zh_CN",
  }
  

• JS中则直接chrome.i18n.getMessage("helloWorld")。
• 测试时，通过给chrome建立一个不同的快捷方式chrome.exe --lang=en来切换语言，如：
• 英文效果：
• 中文效果：

---

总结

比较常用到的一些API系列：

• chrome.tabs
• chrome.runtime
• chrome.webRequest
• chrome.window
• chrome.storage
• chrome.contextMenus
• chrome.devtools
• chrome.extension