造你自己的 Chrome 扩展

Posted on Jan 31, 2024

背景

除了纸质书，有时也会从 Z-Library 下载不同版本的电子书，但是它的域名经常由于查封而改变，因此想造一个 Chrome 扩展来快捷访问 Z-Library 的最新正规站点。

AI 生成

.
├── README.md
├── images
│   └── favicon.png
├── manifest.json
└── popup
    ├── popup.html
    └── popup.js

配置文件

{
  "name": "openzlib",
  "description": "Open Z-Library",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_icon": "images/favicon.png",
    "default_popup": "popup/popup.html"
  },
  "host_permissions": [
    "<all_urls>"
  ]
}

这段代码是一个 manifest.json 文件，它是 Chrome 扩展的关键组成部分。这个文件向 Chrome 浏览器提供了关于扩展的重要信息。

"name": "openzlib"：这是扩展的名称，用户会看到这个名称。
"description": "Open Z-Library"：这是对扩展功能的简短描述。
"version": "1.0"：这是扩展的当前版本。每次发布扩展的新版本时，都需要更新这个值。
"manifest_version": 3：这表示 manifest.json 文件格式的版本。
"action"：这个对象定义了扩展的默认图标和弹出窗口。"default_icon" 属性指向图标文件的位置，"default_popup" 属性指向用户点击 Chrome 工具栏中的扩展图标时应显示的 HTML 文件。
"host_permissions": \["<all_urls>"\]：这个数组定义了扩展可以访问的 URL。在这个例子中，扩展有权限访问所有的 URL。

主要代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

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

</html>

其中 <script src="popup.js"></script> 是一个脚本标签，它链接到一个名为 popup.js 的 JavaScript 文件。这个文件包含了能够改变 HTML 文档的 JavaScript 代码。这个脚本被放在 <body> 标签的底部，以确保在脚本执行时，所有的 HTML 元素都已经加载完毕。

const wikiUrl = 'https://en.wikipedia.org/wiki/Z-Library';
const selector = '#mw-content-text > div.mw-content-ltr.mw-parser-output > table.infobox.vcard > tbody > tr:nth-child(4) > td > div > ul > li:nth-child(1) > span > a'

fetch(wikiUrl)
    .then(response => response.text())
    .then(text => {
        let parser = new DOMParser();
        let doc = parser.parseFromString(text, 'text/html');
        // select the target element
        let target = doc.querySelector(selector);
        let url = target.getAttribute('href');
        // open the url in a new tab
        chrome.tabs.create({ url: url });
    })
    .catch((error) => {
        console.error('Error:', error);
    });

这段 JavaScript 代码的主要功能是从 Wikipedia 的 Z-Library 页面中获取一个特定元素的链接，并在新的浏览器标签页中打开这个链接。

wikiUrl 是目标 Wikipedia 页面的 URL。
selector 是一个 CSS 选择器，用于在 HTML 文档中定位目标元素。
fetch(wikiUrl) 发起一个 HTTP GET 请求，获取 wikiUrl 指向的页面的 HTML 内容。
.then(response => response.text()) 将获取到的响应转换为文本。
.then(text => {...}) 在获取到 HTML 文本后执行一系列操作：
- 创建一个新的 DOMParser 对象。
- 使用 DOMParser.parseFromString(text, 'text/html') 将 HTML 文本转换为 DOM 对象。
- 使用 doc.querySelector(selector) 从 DOM 对象中选择目标元素。
- 使用 target.getAttribute('href') 获取目标元素的 href 属性，即链接 URL。
- 使用 chrome.tabs.create({ url: url }) 在新的浏览器标签页中打开获取到的链接。
.catch((error) => {...}) 用于捕获并处理在上述过程中可能出现的错误。如果有错误发生，它会将错误信息打印到控制台。

安装

从 openzlib 可以下载源码，然后在 Chrome 浏览器中打开 chrome://extensions/，开启开发者模式，点击“加载已解压的扩展程序”，选择源码所在的目录，即可安装。

本文首发于 https://h2cone.github.io/

造你自己的 Chrome 扩展

背景

AI 生成

配置文件

主要代码

安装

参考