计算机基础教程

https://developer.chrome.com/extensions/overview

# 0X00 chrome extension基础

chrome插件本质就是一堆HTML,CSS,JavaScript和一些配置文件的集合，可以拓展用户的浏览器体验

chrome://extensions

Manifest

Json格式的文件，声明基本的版本，权限，图标，browser action或page action，background脚本

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["activeTab", "declarativeContent", "storage"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "page_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/get_started16.png",
            "32": "images/get_started32.png",
            "48": "images/get_started48.png",
            "128": "images/get_started128.png"
        }
    },
    "icons": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
    },
    "options_page": "options.html",
    "manifest_version": 2
  }

Background Script

插件的事件处理器，基本包括browser listener，比如插件安装事件，页面变化事件，快捷键监听事件

background.js:
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

UI Elements

插件的用户界面，通常插件都有browser action或page action，不过也可以有其他形式的用户界面，比如context menu菜单，omnibox，甚至可以没有用户界面，比如只用快捷键keyboard shortcut；通常默认界面我们叫popup.html，一般包含普通的html，插件也可以调用tabs.create或window.open()显示额外的更丰富的用户界面；默认我们是在manifest里面通过browser action或page action定义好popup.html，除此之外，我们还允许通过 chrome.declarativeContent API来做更多自定义rules控制

popup.html:
<body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>

Content Script

插件读写操作web页面dom就是利用这个content script，这个脚本就是将javascript装载到web页面的上下文中运行，可见content script和上面的其他script上下文是不同的，他们可以交互吗？可以，就是通过chrome.storage API

popup.js
chrome.tabs.executeScript(targetTabID, {
      file: '/scripts/content_script.js',
      allFrames: true
    });

Option Page

这个是额外选项，默认安装的extension只有一个background的view可以inpsect，这个是额外的选项可以让用户直接做相应的设置，比如让用户选择需要的功能，这个需要在manifest中定义好options_page；当然从前面的popup页面中也可以设置，只不过这里提供了另外一种方式；

还需要注意chromeAPI基本都是异步的，所以如果你的代码逻辑有依赖，需要放到callback里面

# 0X01 我遇到的问题

首先我想加入一个快捷键功能，不用鼠标点来点去，很简单，manifest加入 "commands": { "your-command-name": { "suggested_key": { "default": "Ctrl+X"

  },
  "description": ""

}

}, 然后background.js： chrome.commands.onCommand.addListener(function(command) { if(command === "your-command-name") { //to implement

....

另外我更改的开源的插件都只能在该tab页面打开一个poppup窗口，

我老婆之前用的比较好的一个插件是可以开启新tab操作别的tab窗口内容，我自己试了下

Cannot access contents of url "chrome-extension://l". Extension manifest must request permission to access this host. 原来操作tabs还是要加权限的但是我不太明白新开tab之后如何在之前的tab也就是target页面上加载执行脚本，所以参考了下别人的插件，开发者模式下chrome这里有个很好的debug功能，可以直接点击inspect，设置脚本断点，当然默认是minified一行脚本，可以点击{}格式化一下：

参考主要逻辑如下：默认popup页面加载：

拿到你想要操作的tab即targetTab

chrome.storage.sync.get(['targetTabID'], function(result) { chrome.tabs.executeScript(result.targetTabID, { file: '/scripts/', allFrames: true

});

});