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

·  阅读 57
谷歌插件笔记05——选项视图,让扩展更灵活

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

相关简介

  • 前言 在前面内容中,了解到了popup(弹窗)和content_sciprts(内容脚本)等组件的基本作用,现在就来介绍谷歌插件中一个新的组件:options_ui(选项视图)。

  • 介绍 选项视图options_ui可以允许用户通过提供选项页面来自定义扩展的行为,这使得了开发的谷歌扩展可以有了更好的体验,以及使用起来更加灵活。

选项视图

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

扩展中打开

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

// manifest.json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": false
  }
}
复制代码

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

image.png

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

image.png

标签中打开

要在新标签中打开的话,只需要把上面配置的open_in_tabfalse改为true即可实现,如下:

// manifest.json
{
  "options_ui": {
    "page": "options.html",
    "open_in_tab": true
  }
}
复制代码

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

image.png

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

更改页面背景色

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

  1. 新建一个选项视图,然后在视图中定义一系列颜色,可供选择;
  2. 选择的颜色通过缓存保存起来,等待其他地方使用;
  3. 通过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"]
    }
  ]
}
复制代码

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

demo02.gif

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

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改