谷歌插件笔记05——选项视图，让扩展更灵活在前面内容中，了解到了弹窗和内容脚本等组件的基本作用，现在就来介绍谷歌插件中一

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

选项视图

选项视图options_ui有两种打开方式，分为在谷歌扩展中打开和新标签中打开，使用方式如下：

扩展中打开

首先，在根目录中新建一个options.html页面，然后在manifest.json中新增如下配置：

// manifest.json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  }
}

重新加载，如果一切顺利的话，鼠标右键点击插件会看到「选项」这个按钮：

鼠标左键点击「选项」按钮后，页面会重定向到chrome://extensions/中区，并弹出一个弹窗页面，这个页面里面就包含了新建的options.html的内容:

标签中打开

要在新标签中打开的话，只需要把上面配置的open_in_tab的false改为true即可实现，如下：

// manifest.json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  }
}

配置好后，刷新扩展，即可在新标签中看到和下面效果图一样的界面：

开头有说到，选项视图可以自定义扩展的行为，让扩展能更加灵活的运行，那接下来就尝试着编写一个小Demo来试一下效果。

更改页面背景色

这个Demo就是实现一个可以更改页面背景色的扩展，并且背景色可以通过选项视图options_ui来配置，设计思路如下：

新建一个选项视图，然后在视图中定义一系列颜色，可供选择；
选择的颜色通过缓存保存起来，等待其他地方使用；
通过content_scripts内容脚本，获取保存的颜色后，修改页面背景色。

理清楚思路，简单Coding后，完成以下代码：

// popup.html
<body>
  POPUP>HTML
  <button>跳转OPTIONS</button>

  <script src="popup.js"></script>
</body>

// popup.js
const btn = document.querySelector('button')
btn.addEventListener('click', () => {
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage()
  } else {
    window.open(chrome.runtime.getURL('options.html'))
  }
})

备注
chrome.runtime.openOptionsPage方法是打开选项卡页面，上面的写法为兼容式的一种写法，具体可以查看官方文档

// static/js/content.js
(async () => {
  const body = document.querySelector('body')
  const bg = await chrome.storage.sync.get('bgColor')
  body.style.backgroundColor = bg.bgColor
})()

// options.html
<body>
  <ul>
    <li>红色</li>
    <li>橙色</li>
    <li>绿色</li>
    <li>蓝色</li>
    <li>紫色</li>
  </ul>
  <script src="options.js"></script>
</body>

// options.js
(async () => {
  const colors = ['red', 'orange', 'green', 'blue', 'purple'];
  const bg = await chrome.storage.sync.get('bgColor')
  const btns = document.querySelectorAll('li')
  const initColor = color => {
    btns.forEach((btn, idx) => {
      if (color === colors[idx]) {
        btn.classList.add('active')
      } else {
        btn.classList.remove('active')
      }
    })
  }
  initColor(bg.bgColor)
  btns.forEach((btn, idx) => {
    btn.addEventListener('click', () => {
      chrome.storage.sync.set({ bgColor: colors[idx] })
      initColor(colors[idx])
    })
  })
})()

关于清单文件manifest.json配置如下：

{
  "name": "options",
  "description": "options crx.",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "options",
    "default_icon": "logo.png",
    "default_popup": "popup.html"
  },
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  },
  "permissions": [
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["static/js/content.js"]
    }
  ]
}

一切顺利的话，就可以成功的看到如下效果图了：

上面就已经完成这个小Demo了，通过选项视图选择颜色后，再进入其他页面刷新一下，即可看到背景颜色被修改成选项视图定义的颜色了。

至此，就已经知道选项视图的基本使用了:)

谷歌插件笔记05——选项视图，让扩展更灵活

相关简介

选项视图

扩展中打开

标签中打开

更改页面背景色