Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

设计界面

扩展程序界面应具有明确的用途，并且应尽可能简洁。与扩展程序本身一样，界面应自定义或增强浏览体验，而不会分散用户的注意力。

本指南探讨了必需和可选的界面功能。您可以借助本指南了解如何在扩展程序中实现不同的界面元素以及何时实现这些元素。

在所有页面上激活扩展程序

如果扩展程序的功能在大多数情况下都有效，请使用 browser_action。

注册浏览器操作

"browser_action" 字段在清单中注册。

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

声明 "browser_action" 可使图标保持彩色，表明扩展程序可供用户使用。

添加徽章

徽章会在浏览器图标上方显示一个彩色横幅，其中最多包含四个字符。只有在其清单中声明了 "browser_action" 的扩展程序才能使用徽章。

使用徽章来指示扩展程序的状态。“Drink Water Event”示例会显示一个带有“ON”的徽章，以向用户表明他们已成功设置闹钟；当扩展程序处于空闲状态时，则不显示任何内容。

通过调用 chrome.browserAction.setBadgeText 设置徽章的文本，并通过调用 chrome.browserAction.setBadgeBackgroundColor 设置横幅颜色。

chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});

在所选页面上激活扩展程序

如果扩展程序的功能仅在特定情况下可用，请使用 page_action。

声明页面操作

"page_action" 字段在清单中注册。

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

声明 "page_action" 将仅在扩展程序可供用户使用时使图标着色，否则图标将以灰度显示。

定义用于激活扩展程序的规则

通过在后台脚本中的 runtime.onInstalled 监听器下调用 chrome.declarativeContent 来定义扩展程序可供使用的时间规则。“Page action by 网址”示例扩展程序设置了一个条件，即网址必须包含“g”。如果满足该条件，扩展程序会调用 declarativeContent.ShowPageAction()。

chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains a 'g' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'g' },
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

启用或停用扩展程序

使用 "page_action" 的扩展程序可以通过调用 pageAction.show 和 pageAction.hide 来动态激活和停用。

Mappy 示例扩展程序会扫描网页以查找地址，并在弹出式窗口中的静态地图上显示该地址的位置。由于该扩展程序依赖于网页内容，因此无法声明规则来预测哪些网页是相关的。相反，如果页面上找到地址，它会调用 pageAction.show 来使图标着色，并表明该扩展程序可在该标签页中使用。

chrome.runtime.onMessage.addListener(function(req, sender) {
  chrome.storage.local.set({'address': req.address})
  chrome.pageAction.show(sender.tab.id);
  chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});

提供扩展程序图标

扩展程序需要至少一个图标来表示自身。为了获得最佳视觉效果，请以 PNG 格式提供图标，不过系统接受 WebKit 支持的任何格式，包括 BMP、GIF、ICO 和 JPEG。

指定工具栏图标

工具栏专用的图标在清单中的 browser_action或page_action下的"default_icon"字段中注册。建议包含多种尺寸，以便在 16-dip 空间中进行缩放。至少建议使用 16x16 和 32x32 尺寸。

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    "default_icon": {
      "16": "extension_toolbar_icon16.png",
      "32": "extension_toolbar_icon32.png"
    }
  }
  ...
}

所有图标都应为正方形，否则可能会失真。如果未提供任何图标，Chrome 会向工具栏添加一个通用图标。

创建和注册其他图标

包含以下尺寸的其他图标，以供在工具栏之外使用。

图标大小	图标用途
16x16	扩展程序页面上的网站图标
32x32	Windows 计算机通常需要此尺寸。提供此选项可防止因缩小 48x48 选项而导致尺寸失真。
48x48	显示在扩展程序管理页面上
128x128	显示在安装过程中和 Chrome 网上应用店中

在清单中的 "icons" 字段下注册图标。

{
  "name": "My Awesome Extension",
  ...
  "icons": {
    "16": "extension_icon16.png",
    "32": "extension_icon32.png",
    "48": "extension_icon48.png",
    "128": "extension_icon128.png"
  }
  ...
}

其他界面功能

弹出式窗口是一个 HTML 文件，当用户点击工具栏图标时，该文件会显示在一个特殊窗口中。弹出式窗口的工作方式与网页非常相似；它可以包含指向样式表和脚本标记的链接，但不允许内嵌 JavaScript。

“Drink Water Event”示例弹出式窗口会显示可用的计时器选项。用户可以通过点击提供的按钮之一来设置闹钟。

弹出式窗口示例屏幕截图

<html>
  <head>
    <title>Water Popup</title>
  </head>
  <body>
      <img src='./stay_hydrated.png' id='hydrateImage'>
      <button id='sampleSecond' value='0.1'>Sample Second</button>
      <button id='15min' value='15'>15 Minutes</button>
      <button id='30min' value='30'>30 Minutes</button>
      <button id='cancelAlarm'>Cancel Alarm</button>
    <script src="popup.js"></script>
  </body>
</html>

弹出式窗口可以在清单中的浏览器操作或页面操作下注册。

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

还可以通过调用 browserAction.setPopup 或 pageAction.setPopup 来动态设置弹出式窗口。

chrome.storage.local.get('signed_in', function(data) {
  if (data.signed_in) {
    chrome.browserAction.setPopup({popup: 'popup.html'});
  } else {
    chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
  }
});

当用户将鼠标悬停在浏览器图标上时，使用提示向用户提供简短说明或说明。

示例提示的屏幕截图

提示在清单中的 "default_title" 字段 browser_action 或 page_action 中注册。

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

还可以通过调用 browserAction.setTitle 和 pageAction.setTitle 来设置或更新提示。

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});

专用语言区域字符串通过国际化实现。创建目录以在名为 _locales 的文件夹中存放特定于语言的消息，如下所示：

_locales/en/messages.json
_locales/es/messages.json

设置消息格式，在每种语言的 messages.json 中。

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

在提示字段中添加消息的名称，而不是消息本身，以启用本地化。

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

多功能框

用户可以通过多功能框调用扩展程序功能。在清单中添加 "omnibox" 字段并指定关键字。“Omnibox New Tab Search”示例扩展程序使用“nt”作为关键字。

{
  "name": "Omnibox New Tab Search",\
  ...
  "omnibox": { "keyword" : "nt" },
  "default_icon": {
    "16": "newtab_search16.png",
    "32": "newtab_search32.png"
  }
  ...
}

当用户在多功能框中输入“nt”时，系统会激活扩展程序。为了向用户表明这一点，系统会将提供的 16x16 图标灰度化，并将其添加到扩展程序名称旁边的多功能框中。

有效多功能框扩展程序

扩展程序会监听 omnibox.onInputEntered 事件。触发该事件后，扩展程序会打开一个新标签页，其中包含用户条目的 Google 搜索结果。

chrome.omnibox.onInputEntered.addListener(function(text) {
  // Encode user input for special characters , / ? : @ & = + $ #
  var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
  chrome.tabs.create({ url: newURL });
});

上下文菜单

通过在清单中授予 "contextMenus" 权限，添加新的上下文菜单选项。

{
  "name": "Global Google Search",
  ...
  "permissions": [
    "contextMenus",
    "storage"
  ],
  "icons": {
    "16": "globalGoogle16.png",
    "48": "globalGoogle48.png",
    "128": "globalGoogle128.png"
  }
  ...
}

16x16 图标会显示在新菜单条目旁边。

通过在后台脚本中调用 contextMenus.create 来创建上下文菜单。此操作应在 runtime.onInstalled 监听器事件下完成。

chrome.runtime.onInstalled.addListener(function() {
  for (let key of Object.keys(kLocales)) {
    chrome.contextMenus.create({
      id: key,
      title: kLocales[key],
      type: 'normal',
      contexts: ['selection'],
    });
  }
});

const kLocales = {
  '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'
};

Global Google Search 上下文菜单示例会根据 locales.js中的列表创建多个选项。如果扩展程序包含多个上下文菜单，Google Chrome 会自动将它们收起为一个父菜单。

多个上下文菜单会收起

命令

扩展程序可以定义特定命令并将其绑定到按键组合。在清单中的 "commands" 字段下注册一个或多个命令。

{
  "name": "Tab Flipper",
  ...
  "commands": {
    "flip-tabs-forward": {
      "suggested_key": {
        "default": "Ctrl+Shift+Right",
        "mac": "Command+Shift+Right"
      },
      "description": "Flip tabs forward"
    },
    "flip-tabs-backwards": {
      "suggested_key": {
        "default": "Ctrl+Shift+Left",
        "mac": "Command+Shift+Left"
      },
      "description": "Flip tabs backwards"
    }
  }
  ...
}

命令可用于提供新的或替代的浏览器快捷键。Tab Flipper 示例扩展程序会监听后台脚本中的 commands.onCommand 事件，并为每个注册的组合定义功能。

chrome.commands.onCommand.addListener(function(command) {
  chrome.tabs.query({currentWindow: true}, function(tabs) {
    // Sort tabs according to their index in the window.
    tabs.sort((a, b) => { return a.index < b.index; });
    let activeIndex = tabs.findIndex((tab) => { return tab.active; });
    let lastTab = tabs.length - 1;
    let newIndex = -1;
    if (command === 'flip-tabs-forward')
      newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
    else  // 'flip-tabs-backwards'
      newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
    chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
  });
});

命令还可以创建专门与扩展程序配合使用的按键绑定。Hello Extensions 示例提供了一个用于打开弹出式窗口的命令。

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "manifest_version": 2,
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

由于扩展程序定义了 browser_action，因此可以在命令中指定 "execute_browser_action" 以打开弹出式窗口文件，而无需添加后台脚本。如果使用 page_action，则可以将其替换为"execute_page_action"。浏览器命令和扩展程序命令都可以在同一扩展程序中使用。

替换页面

扩展程序可以使用自定义 HTML 文件替换“历史记录”“新标签页”或“书签”网页。与弹出式窗口一样，它可以包含专用逻辑和样式，但不允许内嵌 JavaScript。单个扩展程序只能替换三个可能页面中的一个。

在清单中的 "chrome_url_overrides" 字段下注册替换页面。

{
  "name": "Awesome Override Extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "override_page.html"
  },
  ...
}

替换这些页面时，应将 "newtab" 字段替换为 "bookmarks" 或 "history"。

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>