【干货】Chrome插件(扩展)开发全攻略

{
  // 清单文件的版本，这个必须写，而且必须是2
  "manifest_version": 2,
  // 插件的名称
  "name": "demo",
  // 插件的版本
  "version": "1.0.0",
  // 插件描述
  "description": "简单的Chrome扩展demo",
  // 图标，一般偷懒全部用一个尺寸的也没问题
  "icons":
  {
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  // 会一直常驻的后台JS或后台页面
  "background":
  {
    // 2种指定方式，如果指定JS，那么会自动生成一个背景页
    "page": "background.html"
    //"scripts": ["js/background.js"]
  },
  // 浏览器右上角图标设置，browser_action、page_action、app必须三选一
  "browser_action":
  {
    "default_icon": "img/icon.png",
    // 图标悬停时的标题，可选
    "default_title": "这是一个示例Chrome插件",
    "default_popup": "popup.html"
  },
  // 当某些特定页面打开才显示的图标
  /*"page_action":
  {
    "default_icon": "img/icon.png",
    "default_title": "我是pageAction",
    "default_popup": "popup.html"
  },*/
  // 需要直接注入页面的JS
  "content_scripts":
  [
    {
      //"matches": ["http://*/*", "https://*/*"],
      // "<all_urls>" 表示匹配所有地址
      "matches": ["<all_urls>"],
      // 多个JS按顺序注入
      "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
      // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
      "css": ["css/custom.css"],
      // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "run_at": "document_start"
    },
    // 这里仅仅是为了演示content-script可以配置多个规则
    {
      "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
      "js": ["js/show-image-content-size.js"]
    }
  ],
  // 权限申请
  "permissions":
  [
    "contextMenus", // 右键菜单
    "tabs", // 标签
    "notifications", // 通知
    "webRequest", // web请求
    "webRequestBlocking",
    "storage", // 插件本地存储
    "http://*/*", // 可以通过executeScript或者insertCSS访问的网站
    "https://*/*" // 可以通过executeScript或者insertCSS访问的网站
  ],
  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
  "web_accessible_resources": ["js/inject.js"],
  // 插件主页，这个很重要，不要浪费了这个免费广告位
  "homepage_url": "https://www.baidu.com",
  // 覆盖浏览器默认页面
  "chrome_url_overrides":
  {
    // 覆盖浏览器默认的新标签页
    "newtab": "newtab.html"
  },
  // Chrome40以前的插件配置页写法
  "options_page": "options.html",
  // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
  "options_ui":
  {
    "page": "options.html",
    // 添加一些默认的样式，推荐使用
    "chrome_style": true
  },
  // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
  "omnibox": { "keyword" : "go" },
  // 默认语言
  "default_locale": "zh_CN",
  // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件
  "devtools_page": "devtools.html"
}

{
  // 需要直接注入页面的JS
  "content_scripts":
  [
    {
      //"matches": ["http://*/*", "https://*/*"],
      // "<all_urls>" 表示匹配所有地址
      "matches": ["<all_urls>"],
      // 多个JS按顺序注入
      "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
      // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
      "css": ["css/custom.css"],
      // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "run_at": "document_start"
    }
  ],
}

document.addEventListener("DOMContentLoaded", function () {
  console.log("我被执行了！");
});

{
  // 会一直常驻的后台JS或后台页面
  "background":
  {
    // 2种指定方式，如果指定JS，那么会自动生成一个背景页
    "page": "background.html"
    //"scripts": ["js/background.js"]
  },
}

{
  "background":
  {
    "scripts": ["event-page.js"],
    "persistent": false
  },
}

{
  "browser_action":
  {
    "default_icon": "img/icon.png",
    // 图标悬停时的标题，可选
    "default_title": "这是一个示例Chrome插件",
    "default_popup": "popup.html"
  }
}

// 向页面注入JS
function injectCustomJs(jsPath) {
  jsPath = jsPath || "js/inject.js";
  var temp = document.createElement("script");
  temp.setAttribute("type", "text/javascript");
  // 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
  temp.src = chrome.extension.getURL(jsPath);
  temp.onload = function () {
    // 放在页面不好看，执行完后移除掉
    this.parentNode.removeChild(this);
  };
  document.head.appendChild(temp);
}

Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

{
  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
  "web_accessible_resources": ["js/inject.js"],
}

"browser_action":
{
  "default_icon": "img/icon.png",
  "default_title": "这是一个示例Chrome插件",
  "default_popup": "popup.html"
}

chrome.browserAction.setBadgeText({ text: "new" });
chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });

chrome.contextMenus.create({
  type: 'normal'， // 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normal
  title: '菜单的名字', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本
  contexts: ['page'], // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page
  onclick: function(){}, // 单击时触发的方法
  parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单
  documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单
});
// 删除某一个菜单项
chrome.contextMenus.remove(menuItemId)；
// 删除所有自定义右键菜单
chrome.contextMenus.removeAll();
// 更新某一个菜单项
chrome.contextMenus.update(menuItemId, updateProperties);

"chrome_url_overrides":
{
  "newtab": "newtab.html",
  "history": "history.html",
  "bookmarks": "bookmarks.html"
}

{
  // 只能指向一个HTML文件，不能是JS文件
  "devtools_page": "devtools.html"
}

<!doctype html>
<html>
  <head></head>
  <body>
    <script type="text/javascript" src="js/devtools.js"></script>
  </body>
</html>

// 创建自定义面板，同一个插件可以创建多个自定义面板
// 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调
chrome.devtools.panels.create("MyPanel", "img/icon.png", "mypanel.html", function (panel) {
  console.log("自定义面板创建成功！"); // 注意这个log一般看不到
});

// 创建自定义侧边栏
chrome.devtools.panels.elements.createSidebarPane("Images", function (sidebar) {
  // sidebar.setPage('../sidebar.html'); // 指定加载某个页面
  sidebar.setExpression('document.querySelectorAll("img")', "All Images"); // 通过表达式来指定
  //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象
});

// 检测jQuery
document.getElementById("check_jquery").addEventListener("click", function () {
  // 访问被检查的页面DOM需要使用inspectedWindow
  // 简单例子：检测被检查页面是否使用了jQuery
  chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function (result, isException) {
    var html = "";
    if (isException) html = "当前页面没有使用jQuery。";
    else html = "当前页面使用了jQuery，版本为：" + result;
    alert(html);
  });
});

// 打开某个资源
document.getElementById("open_resource").addEventListener("click", function () {
  chrome.devtools.inspectedWindow.eval("window.location.href", function (result, isException) {
    chrome.devtools.panels.openResource(result, 20, function () {
      console.log("资源打开成功！");
    });
  });
});

// 审查元素
document.getElementById("test_inspect").addEventListener("click", function () {
  chrome.devtools.inspectedWindow.eval(
    "inspect(document.images[0])",
    function (result, isException) {},
  );
});

// 获取所有资源
document.getElementById("get_all_resources").addEventListener("click", function () {
  chrome.devtools.inspectedWindow.getResources(function (resources) {
    alert(JSON.stringify(resources));
  });
});

{
  // Chrome40以前的插件配置页写法
  "options_page": "options.html",
}

{
  "options_ui":
  {
      "page": "options.html",
    // 添加一些默认的样式，推荐使用
      "chrome_style": true
  },
}

{
  // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
  "omnibox": { "keyword" : "go" },
}

// omnibox 演示
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
  console.log("inputChanged: " + text);
  if (!text) return;
  if (text == "美女") {
    suggest([
      { content: "中国" + text, description: "你要找“中国美女”吗？" },
      { content: "日本" + text, description: "你要找“日本美女”吗？" },
      { content: "泰国" + text, description: "你要找“泰国美女或人妖”吗？" },
      { content: "韩国" + text, description: "你要找“韩国美女”吗？" },
    ]);
  } else if (text == "微博") {
    suggest([
      { content: "新浪" + text, description: "新浪" + text },
      { content: "腾讯" + text, description: "腾讯" + text },
      { content: "搜狐" + text, description: "搜索" + text },
    ]);
  } else {
    suggest([
      { content: "百度搜索 " + text, description: "百度搜索 " + text },
      { content: "谷歌搜索 " + text, description: "谷歌搜索 " + text },
    ]);
  }
});

// 当用户接收关键字建议时触发
chrome.omnibox.onInputEntered.addListener((text) => {
  console.log("inputEntered: " + text);
  if (!text) return;
  var href = "";
  if (text.endsWith("美女"))
    href = "http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=" + text;
  else if (text.startsWith("百度搜索"))
    href = "https://www.baidu.com/s?ie=UTF-8&wd=" + text.replace("百度搜索 ", "");
  else if (text.startsWith("谷歌搜索"))
    href = "https://www.google.com.tw/search?q=" + text.replace("谷歌搜索 ", "");
  else href = "https://www.baidu.com/s?ie=UTF-8&wd=" + text;
  openUrlCurrentTab(href);
});
// 获取当前选项卡ID
function getCurrentTabId(callback) {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    if (callback) callback(tabs.length ? tabs[0].id : null);
  });
}

// 当前标签打开某个链接
function openUrlCurrentTab(url) {
  getCurrentTabId((tabId) => {
    chrome.tabs.update(tabId, { url: url });
  });
}

chrome.notifications.create(null, {
  type: "basic",
  iconUrl: "img/icon.png",
  title: "这是标题",
  message: "您刚才点击了自定义右键菜单！",
});

var views = chrome.extension.getViews({ type: "popup" });
if (views.length > 0) {
  console.log(views[0].location.href);
}

function sendMessageToContentScript(message, callback) {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, message, function (response) {
      if (callback) callback(response);
    });
  });
}
sendMessageToContentScript({ cmd: "test", value: "你好，我是popup！" }, function (response) {
  console.log("来自content的回复：" + response);
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
  if (request.cmd == "test") alert(request.value);
  sendResponse("我收到了你的消息！");
});

chrome.runtime.sendMessage(
  { greeting: "你好，我是content-script呀，我主动发消息给后台！" },
  function (response) {
    console.log("收到来自后台的回复：" + response);
  },
);

// 监听来自content-script的消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log("收到来自content-script的消息：");
  console.log(request, sender, sendResponse);
  sendResponse("我是后台，我已收到你的消息：" + JSON.stringify(request));
});

window.postMessage({ test: "你好！" }, "*");

window.addEventListener(
  "message",
  function (e) {
    console.log(e.data);
  },
  false,
);

var customEvent = document.createEvent("Event");
customEvent.initEvent("myCustomEvent", true, true);
function fireCustomEvent(data) {
  hiddenDiv = document.getElementById("myCustomEventDiv");
  hiddenDiv.innerText = data;
  hiddenDiv.dispatchEvent(customEvent);
}
fireCustomEvent("你好，我是普通JS！");

var hiddenDiv = document.getElementById("myCustomEventDiv");
if (!hiddenDiv) {
  hiddenDiv = document.createElement("div");
  hiddenDiv.style.display = "none";
  document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener("myCustomEvent", function () {
  var eventData = document.getElementById("myCustomEventDiv").innerText;
  console.log("收到自定义事件消息：" + eventData);
});

getCurrentTabId((tabId) => {
  var port = chrome.tabs.connect(tabId, { name: "test-connect" });
  port.postMessage({ question: "你是谁啊？" });
  port.onMessage.addListener(function (msg) {
    alert("收到消息：" + msg.answer);
    if (msg.answer && msg.answer.startsWith("我是")) {
      port.postMessage({ question: "哦，原来是你啊！" });
    }
  });
});

// 监听长连接
chrome.runtime.onConnect.addListener(function (port) {
  console.log(port);
  if (port.name == "test-connect") {
    port.onMessage.addListener(function (msg) {
      console.log("收到长连接消息：", msg);
      if (msg.question == "你是谁啊？") port.postMessage({ answer: "我是你爸！" });
    });
  }
});

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

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

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

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

chrome.windows.getCurrent(function (currentWindow) {
  console.log("当前窗口ID：" + currentWindow.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);
    });
  });
}

// 读取数据，第一个参数是指定要读取的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("保存成功！");
});

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

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

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

<input id="btn" type="button" value="收藏" onclick="test()" />

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

$("#btn").on("click", function () {
  alert("测试");
});

<a href="javascript:;" id="get_secret">请求secret</a>

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.