张春成

V2

2022/10/23阅读:28主题:默认主题

Chrome 插件

Chrome 插件小例

浏览器插件可以增强 Web 浏览体验。


原理及作用

用最简单的话来说,浏览器就是获取网络内容并进行显示的软件。那么,在完成网络内容的规定动作之外,我们当然可以让这个软件再额外进行一些小动作,这些小动作就是浏览器插件。

要继续学习这些小动作,就要翻阅浏览器的 API,它有原版和中文译版

Chrome APIs[1]

chrome.\* APIs[2]

那么,下一个问题是,我们为什么要使用插件呢?这个问题没有确定的答案,但这里可以给出一个使用插件的优势,那就是插件处理的内容都是经过渲染之后的内容,也就是“用户所见即所得的内容”。

我比较乐于相信,这是体现用户比网站服务商更加了解自己需求的“定制化”内容。要实现这些内容,就需要网页在完成规定动作之后,再按照自己的要求,做一些小动作。

要实现插件并不难,以下是两个例子。

标签页浏览的插件

首先是浏览器标签页浏览的插件,它可以分窗口地列出浏览器页面的内容,尤其是开了几十个窗口之后,可以方便用户查找特定的标题。

listenzcc/edgeExtTabsController[3]

它是点击触发的,也就是说用户在需要时可以通过点击图标实现标签页汇总。

Untitled
Untitled

JS 注入的插件

另一个是使用 JavaScript 注入的方法,达到增强 ArXiv 搜索结果的目的。简单来说,它会把搜索按照 Tag 进行分类统计,之后可以通过点击 Tag 标签的方式进一步筛选分类结果

listenzcc/ArXiv-search-filter-chrome-ext[4]

它是自动执行的,触发条件是 https://arxiv.org/search/* 这样的网页加载完成之后。它的行为是在结果部分增加一串标签,用于筛选结果。

explain.png
explain.png

参考资料

[1]

Chrome APIs: http://docs.getquicker.cn/chrome/developer.chrome.com/extensions/api_index.html

[2]

chrome.* APIs: http://docs.getxhr.com/ChromeExtensionDocument/api_index.html

[3]

listenzcc/edgeExtTabsController: https://github.com/listenzcc/edgeExtTabsController

[4]

listenzcc/ArXiv-search-filter-chrome-ext: https://github.com/listenzcc/ArXiv-search-filter-chrome-ext

分类:

前端

标签:

前端

作者介绍

张春成
V2