资讯专栏INFORMATION COLUMN

chrome插件开发 - tab选项卡管理器

琛h。 / 2108人阅读

摘要:咦,为什么不做一个插件用来管理呢每次同时打开过多的选项卡时,被挤压的标题总是让我分不清哪个是哪个,查看起来十分不便。即数据中的属性,因此关闭选项卡的功能实现起来也没有问题。

1. 前言

继上周第一次开发Chrome插件github-star-trend之后,我就一直寻思有什么现实问题可以用插件来解决呢?正当我在浏览器中搜索寻找灵感时,打开的众多tab选项卡令我灵光一闪。

咦,为什么不做一个插件用来管理tab呢?每次同时打开过多的tab选项卡时,被挤压的标题总是让我分不清哪个是哪个,查看起来十分不便。于是乎,经过一个周末下午的折腾,我倒腾出这么个东西(gif图可能有点大,请耐心等待...):

2. 准备工作

按照惯例,正式进入主题之前让我们来先了解点预备知识。默默打开Chrome插件的官方文档,直奔我们的Tabs。可以看到它为我们提供了很多方法,而且竟然还有executeScript,这个可以说权限非常大了,不过跟我们这次的需求没啥关系。。。

2.1 query

由于我们的需求是管理tab选项卡,所以首先肯定得获取所有的tab信息。扫了一遍Methods,最相关的就是方法query

Gets all tabs that have the specified properties, or all tabs if no properties are specified.

正如官方介绍,该方法可以根据指定条件返回相应的tabs;且当不指定属性时,可以获得所有的tabs。这恰好满足我们的需求,按照API指示,我在callback中尝试打印出了拿到的tabs对象:

chrome.tabs.query({}, tabs => console.log(tabs));
[
  {
    "active": true,
    "audible": false,
    "autoDiscardable": true,
    "discarded": false,
    "favIconUrl": "https://static.clewm.net/static/images/favicon.ico",
    "height": 916,
    "highlighted": true,
    "id": 25,
    "incognito": false,
    "index": 0,
    "mutedInfo": {"muted":false},
    "pinned": true,
    "selected": true,
    "status": "complete",
    "title": "草料文本二维码生成器",
    "url": "https://cli.im/text?bb032d49e2b5fec215701da8be6326bb",
    "width": 1629,
    "windowId": 23
  },
  ...
  {
    "active": true,
    "audible": false,
    "autoDiscardable": true,
    "discarded": false,
    "favIconUrl": "https://www.google.com/images/icons/product/chrome-32.png",
    "height": 948,
    "highlighted": true,
    "id": 417,
    "incognito": false,
    "index": 0,
    "mutedInfo": {"muted": false},
    "pinned": false,
    "selected": true,
    "status": "complete",
    "title": "chrome.tabs - Google Chrome",
    "url": "https://developers.chrome.com/extensions/tabs#method-query",
    "width": 1629,
    "windowId": 812
  }
]

仔细观察不难发现,两个tab的windowId不同。这是由于我在本地同时打开了两个Chrome窗口,而这两个tab恰好在两个不同的窗口内,所以正好符合预期。

另外idindex, highlightedfavIconUrltitle等字段信息在后文中也起到非常重要的作用,相关的释义都可以在这里查看。

在构思Chrome插件UI时,为了突出当前窗口中的当前tab,我们就必须从上述数据中找出这个tab。由于每个窗口中都有一个tab是highlighted的,所以我们无法直接确定哪个tab是当前窗口的。不过,我们可以这样:

chrome.tabs.query(
  {active: true, currentWindow: true},
  tabs => console.log(tabs[0])
);

根据文档,通过指定activecurrentWindow这两个属性为true,我们就能顺利拿到当前窗口的当前tab。然后再根据tab的windowIdhighlighted进行匹配,我们就能从tabs数组中定位出哪个才是真正的当前tab了。

2.2 highlight

根据上面所述,我们已经可以拿到所有的tabs信息以及确定出哪个tab是当前窗口的当前tab,所以我们可以根据这些数据构建出一个列表。而接下来要做的就是,当用户点击其中某一项时,浏览器就能切换到所对应的tab选项卡。带着这个需求,再次翻阅文档找到了highlight

Highlights the given tabs and focuses on the first of group. Will appear to do nothing if the specified tab is currently active.
chrome.tabs.highlight({windowId, tabs});

根据该API的指示,它需要的是windowId和tab的index,而这些信息都在每个tab实体中可以拿到。不过这里有一个坑需要注意:那就是如果在当前窗口切换到另一个窗口的tab时,虽然另一个窗口的tab得以切换,但是Chrome窗口仍聚焦于当前窗口。所以需要用以下的方法,令另外的那个窗口得到聚焦:

chrome.windows.update(windowId, {focused: true});
2.3 remove

为了增强插件的实用性,我们可以在tabs列表中加入删除指定tab选项卡的功能。而在翻阅文档之后,可以确定remove可以实现我们的需求。

Closes one or more tabs.
chrome.tabs.remove(tabId);

tabId即tab数据中的id属性,因此关闭选项卡的功能实现起来也没有问题。

3. 开工

不同于插件github-star-trend,这次复杂度更高,涉及到更多的交互操作。为此,我们引入reactantdwebpack,不过整体开发起来还是比较容易的,更多的可能还是在于Chrome插件提供的API熟练度。

3.1 manifest.json
{
  "permissions": [
      "tabs"
  ],
  "content_security_policy": "script-src "self" "unsafe-eval"; object-src "self"",
  "browser_action": {
    "default_icon": {
      "16": "./icons/logo_16.png",
      "32": "./icons/logo_32.png",
      "48": "./icons/logo_48.png"
    },
    "default_title": "Tab Killer",
    "default_popup": "./popup.html"
  }
}

由于这次开发的插件跟tabs相关,所以我们需要在permissions字段中申请tabs权限。

由于webpack在dev模式下打包会用到eval,Chrome浏览器出于安全策略会报错,因此需要设置content_security_policy使其忽略(如果是prod模式打的包,就不需要设置)。

本次插件的交互是点击按钮弹出一个浮层,所以需要设置browser_action属性,而其default_popup字段正是我们接下来要开发的页面。

3.2 App.js

该文件是我们的核心文件之一,主要负责tabs数据的获取和处理等维护工作。

根据API文档所示,获取tabs数据是一个异步操作,我们在其回调函数中才能拿到。这也意味着我们的应用一开始应该是处于一个LOADING的状态,拿到数据之后成为OK状态,另外再考虑到异常情况(例如无数据或出错),我们可以将其定义为EXCEPTION状态。

class App extends React.PureComponent {

  state = {
    tabsData: [],
    status: STATUS.LOADING
  }

  componentDidMount() {
    this.getTabsData();
  }

  getTabsData() {
    Promise.all([
      this.getAllTabs(),
      this.getCurrentTab(),
      Helper.waitFor(300),
    ]).then(([allTabs, currentTab]) => {
      const tabsData = Helper.convertTabsData(allTabs, currentTab);
      if(tabsData.length > 0) {
        this.setState({tabsData, status: STATUS.OK});
      } else {
        this.setState({tabsData: [], status: STATUS.EXCEPTION});
      }
    }).catch(err => {
      this.setState({tabsData: [], status: STATUS.EXCEPTION});
      console.log("get tabs data failed, the error is:", err.message);
    });
  }

  getAllTabs = () => new Promise(resolve => chrome.tabs.query({}, tabs => resolve(tabs)))

  getCurrentTab = () => new Promise(resolve => chrome.tabs.query({active: true, currentWindow: true}, tabs => resolve(tabs[0])))

  render() {
    const {status, tabsData} = this.state;
    return (
      
); } } const Helper = { waitFor(timeout) { return new Promise(resolve => { setTimeout(resolve, timeout); }); }, convertTabsData() {} }

思路很简单,就是在didMount的时候获取tabs数据,不过我们在这里用到Promise.all来控制异步操作。

由于获取tabs数据这一操作是异步的,不同电脑,不同状态,不同tab数量时该操作的耗时都可能不同,所以为了更好的用户体验,我们可以在一开始用antd的Spin组件来充当占位符。需要注意的是,如果获取tabs数据非常快,Loading动画会有一闪而过的感觉,并不十分友好。因此我们用个300ms的promise搭配Promise.all使用,可以保证至少300ms的Loading动画。

接下来就是拿到tabs数据之后的convert工作。

Chrome提供的API获取到的数据是一个扁平的数组,不同窗口内的tab也被混在同一个数组内。我们更希望能按窗口进行分组,这样在浏览和查找时对用户更直观,操作更方便,用户体验更好。所以我们需要对tabsData进行一次转换:

convertTabsData(allTabs = [], currentTab = {}) {

  // 过滤非法数据
  if(!(allTabs.length > 0 && currentTab.windowId !== undefined)) {
    return [];
  }

  // 按windowId进行分组归类
  const hash = Object.create(null);
  for(const tab of allTabs) {
    if(!hash[tab.windowId]) {
      hash[tab.windowId] = [];
    }
    hash[tab.windowId].push(tab);
  }

  // 将obj转成array
  const data = [];
  Object.keys(hash).forEach(key => data.push({
    tabs: hash[key],
    windowId: Number(key),
    isCurWindow: Number(key) === currentTab.windowId
  }));

  // 进行排序,将当前窗口的顺序往上提,保证更好的体验
  data.sort((winA, winB) => {
    if(winA.isCurWindow) {
      return -1;
    } else if(winB.isCurWindow) {
      return 1;
    } else {
      return 0;
    }
  });

  return data;
}
3.3 TabList.js

根据App.js中的设计,我们可以先搭起代码的骨架:

export class TabsList extends React.PureComponent {

  renderLoading() {
    return (
      
); } renderOK() { // TODO... } renderException() { return (
); } render() { const {status} = this.props; switch(status) { case STATUS.LOADING: return this.renderLoading(); case STATUS.OK: return this.renderOK(); case STATUS.EXCEPTION: default: return this.renderException(); } } }

接下来就是renderOK的实现,由于没有固定的设计稿,我们可以尽情发挥自己的想象。这里借助antd粗略地实现了一版交互(加入了切换tab、搜索和删除等操作),具体代码考虑到篇幅就不贴了,感兴趣的可以进这里查看。

4. 完结

整个插件的制作过程,到这儿就已经完了。如果你有更好的idea或设计,可以提PR哦~通过这次学习,熟悉了对Tabs的操作,同时对Chrome插件的制作流程也算是有了更进一步的感悟。

5. 参考

Chrome extensions dev guide

Chrome extensions browserAction

Chrome extensions tabs

本文所有代码托管在这儿,觉得还行的可以star一下,也可以关注我的Blog。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104955.html

相关文章

  • Chrome扩展插件练习——书签管理

    摘要:代码代码戳这里插件预备知识首先给出一本参考的中文书籍,在练习的过程中有帮到忙。你还可以重写别的页面,比如书签管理页面等,可以参考文档中文翻译过来应该叫内容脚本,它可以运行在你指定的页面之中,可以拿到指定页面的一些信息。 前言 这是一篇关于Chrome扩展插件入门、Vue.js入门的小练习,功能是:在当前浏览的页面点击扩展图标,并点击保存之后,该页面就会存在你的新标签页中。其实就是一个可...

    lingdududu 评论0 收藏0
  • MUI使用总结

    摘要:预加载自定义事件第三方扩展插件涉及的,除了,其它所有手机浏览器及浏览器均无法使用,目前主要包括语音输入事件相关注意浏览器没有事件事件相关的,手机端浏览器均可使用端模拟手机浏览器也可以正常使用。 最近项目中需要使用MUI做一个视频播放的小功能。我就花时间研究了一下MUI。 MUI是一个使用JavaScript开发Android和IOS应用的前端框架。这篇文章将以知识树的形式对MUI的使用...

    elliott_hu 评论0 收藏0
  • 21 个VSCode 快捷键,让代码更快,更有趣

    摘要:在这篇文章中,我将列出我最喜欢的快捷键,这些快捷键让我更快的编写代码,也让编码变得更有趣,以下是个快捷键,分享给你。打开键盘快捷键或,搜索。在中,启动性能是很重要的。逐个选择文本可以通过快捷键右箭头右箭头和左箭头左箭头逐个选择文本。 为了保证的可读性,本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你! 注意:自己尝试的时候,Mac(17, p...

    elina 评论0 收藏0
  • 阻止广告:JavaScript实现Chrome插件实例分析

    摘要:以下示例将阻止所有对的请求。从存储请求和阻止请求的对象中删除当前选项卡的属性。收听消息告知后台进程阻止的列表已被用户更新。两者都提供类似的功能和事件处理程序。 前言 当我们浏览网站时,都会发送许多请求来获取网页内容。这些请求中有些是重要的,而有些是我们不需要,因为它们可能是广告或建议等。在本文中,将创建一个有助于阻止和取消阻止所选URL的Chrome扩展插件,让你选择你打开的网址及该打...

    Sike 评论0 收藏0
  • 《CSS重构:样式表性能调优》读书笔记

    摘要:特指度度量的是选择器识别元素的精确性。为中的各个变量赋予相应的数值,就能得到特指度。为类选择器属性选择器和伪类的数量。该文件包含选项卡组的样式。易于混淆的属性,应用注释予以说明。属性按照字母顺序排列。属性值为时,省略单位。 1、什么是优秀的架构 (1)优秀的架构是可预测的(2)优秀的架构是可扩展的(3)优秀的架构可提升代码复用性(4)优秀的架构可扩展(5)优秀的架构可维护什么时候可以重...

    imingyu 评论0 收藏0

发表评论

0条评论

琛h。

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<