Chrome 扩展程序开发文档笔记认识扩展程序认识一个扩展项目的文件组成，总体架构文档 manifest.json 文

认识扩展程序

认识一个扩展项目的文件组成，总体架构文档

manifest.json 文件

描述扩展的信息（name, version, manifest_version 是强制要求字段）

service worker

用来和浏览器事件交互，事件有多种，比如打开/关闭 tab, 移除书签，可以使用所有的 chrome API，但是不能直接和 web 页面上的内容交互，只有 content scripts 才能直接访问 web 页面

content scripts

在 web 页面上执行的脚本，可以访问和修改 DOM（脚本插入到 web 页面之后），只能使用部分 chrome API，通过折中的方式可以使用全部 API （和 service worker 通过 message 通信）

popup 和其他页面

扩展可以包含多种类型的页面，比如 popup, options page , other HTML pages，所有类型的页面都可以访问 chrome API

popup 就是点击扩展程序的图标出来的页面（可以理解为功能页面）
options 就是除了 popup 另外提供给扩展用的配置页面，可以根据扩展的需求进行配置（可以理解为配置页面）

认识交互方式

用户接口文档

action

"action" key 来定制扩展的行为，可以是打开 popup 也可以是 click 事件

chrome API declarativeContent 可以选择条件定制扩展是否生效

图标

chrome 接受 PNG, BMP,GIF,ICO,JPEG 这些各种格式的扩展图标。首推 PNG 格式，不接受 SVG 格式。

action badge 徽章

可以带字或者不带字

Popup

本质是 html 可以包含 style,script 标签，但是不允许内联 script

根据登录状态可以动态设置 popup

chrome.storage.local.get('signed_in', (data) => {
    if(data.signed_in) {
        chrome.action.setPopup({ popup: 'popup.html'})
    }else{
        chrome.action.setPopup({ popup: 'popup_sign_in.html'})
    }
})

side panel 侧边栏

字典查词的例子

tooltip 设置提示

使用 action.default_title 设置

click 事件

如果扩展没有 popup 那么可以注册 click 事件，否则不生效

// service_worker
chrome.action.onClicked.addListener((tab) => {
    // click 事件监听器
})

Omnibox

略

context menu

鼠标右键单击出来的菜单，需要申请 contextMenus 权限，如果有 icon 这里会展示 16x16 的

在 onInstalled 安装的钩子上注册 contex menu

// service-worker.js
const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  'ca': 'Canada',
  'cn': 'China',
  'fr': 'France',
  'it': 'Italy',
  'co.in': 'India',
  'co.jp': 'Japan',
  'com.ms': 'Mexico',
  'ru': 'Russia',
  'co.za': 'South Africa',
  'co.uk': 'United Kingdom'
};

chrome.runtime.onInstalled.addListener(async () => {
    for(let [tld, locale] of Object.entries(tldLocales)) {
        chrome.contextMenus.create({
            id: tld,
            title: locale,
            type: 'normal',
            contexts: ['selection']
        })
    }
})

context菜单例子

commands

注册快捷键

页面覆盖

扩展可以覆盖 History, New Tab, Bookmarks

比如极客时间扩展程序就是覆盖了 New Tab 页面，需要配置 chrome_url_overrides key

通知

扩展可以推送通知，需要申请 notifications 权限

// service_worker.js
function showStayHydratedNotification() {
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'stay_hydrated.png',
    title: 'Time to Hydrate',
    message: 'Everyday I\'m Guzzlin\'!',
    buttons: [
      { title: 'Keep it Flowing.' }
    ],
    priority: 0
  });
}

国际化/翻译