谷歌浏览器插件开发指南

目录结构

manifest.json

插件的主要文件，描述插件的信息、权限、脚本等，和uniapp的manifest.json文件类似

json
{
  "manifest_version": 2,
  "name": "My First Extension",
  "description": "This is a sample Chrome Extension",
  "version": "1.0",
  /*插件的图标*/
  "icons": {
    "48": "icon.png",
    "128": "icon_large.png"
  },
  /*需要申请的权限*/
  "permissions": [
    "activeTab",
    "storage",
    "https://*.mywebsite.com/*"
  ],
  /*后端运行脚本，随浏览器加载*/
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  /*内容脚本*/
  "content_scripts": [
    {
      "matches": ["https://*.google.com/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  /*插件显示在浏览器工具栏的信息*/
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Open the popup"
  },
  /*插件配置页*/
  "options_page": "options.html",
  /**/
  "web_accessible_resources": [
    "script.js",
    "style.css"
  ]
}

背景脚本

javascript
// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="green"'
  });
});

内容脚本

javascript
// content.js
window.onload = function() {
  var links = document.getElementsByTagName('a');
  for(var i = 0; i < links.length; i++) {
    links[i].style.color = 'red';
  }
};

弹出页面

html
<!-- popup.html -->
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to My Extension!</h1>
</body>
</html>

选项页面

html
<!-- options.html -->
<!DOCTYPE html>
<html>
<body>
<h1>Extension Options</h1>
<label>Background color: <input type="text" id="bgColor"></label>
<button id="save">Save</button>
<script src="options.js"></script>
</body>
</html>

javascript
// options.js
document.getElementById('save').onclick = function() {
  var color = document.getElementById('bgColor').value;
  chrome.storage.sync.set({backgroundColor: color});
};

插件的生命周期

安装或更新
启动
运行
停止
卸载

常用事件

浏览器事件

浏览器启动事件

javascript
chrome.runtime.onStartup.addListener(function() {
    console.log("Browser has been started.");
});

浏览器关闭事件

javascript
chrome.windows.onRemoved.addListener(function(windowId) {
    chrome.windows.getAll({}, function(windows) {
        if(windows.length == 0) {
            console.log("Browser is closing, the last window was closed.");
        }
    });
});

打开新窗口事件


chrome.windows.onCreated.addListener(function() {
    console.log("New window opened.");
});

关闭窗口事件

javascript
chrome.windows.onRemoved.addListener(function(windowId) {
    console.log("Window with id " + windowId + " was closed.");
});

切换标签事件

javascript
chrome.tabs.onActivated.addListener(function(activeInfo) {
    console.log("Tab with id " + activeInfo.tabId + " is now active.");
});

网络事件

请求发送事件：chrome.webRequest.onBeforeRequest
响应接收事件：chrome.webRequest.onCompleted
连接错误事件：chrome.webRequest.onErrorOccurred

用户事件

点击插件图标事件：chrome.browserAction.onClicked
选择插件菜单事件：chrome.contextMenus.onClicked
使用快捷键事件： chrome.commands.onCommand

常用权限

storage
bookmarks
activeTab
history
contextMenus

调试

在浏览器的扩展管理页面，打开开发人员模式，选择“加载解压缩的扩展”进行开发，修改代码以后刷新页面即可看到效果。

常用接口

tabs - 标签

javascript
chrome.tabs.create({url: "http://www.example.com"});

bookmarks - 书签

javascript
chrome.bookmarks.create({
    'parentId': '1',
    'title': 'Extension bookmarks',
    'url': 'http://www.example.com'
});

notifcations - 通知

javascript
chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icon.png',
    title: 'Notification title',
    message: 'Notification message'
});

storage - 存储

javascript
// 保存数据
chrome.storage.sync.set({ key: value }, function() {
    console.log("Data saved.");
});
 
// 读取数据
chrome.storage.sync.get("key", function(result) {
    console.log("Data retrieved: ", result.key);
});

目录

目录结构

manifest.json

背景脚本

内容脚本

弹出页面

选项页面

插件的生命周期

常用事件

浏览器事件

浏览器启动事件

浏览器关闭事件

打开新窗口事件

关闭窗口事件

切换标签事件

网络事件

用户事件

常用权限

调试

常用接口

tabs - 标签

bookmarks - 书签

notifcations - 通知

storage - 存储

参考