浏览器插件开发

Create by fall on 16 Aug 2022 Recently revised in 24 Apr 2024

火狐浏览器的配置界面：about:，其中核心配置界面是 about:config

谷歌浏览器的配置界面：chrome://，试验功能配置界面：chrome://flags/

公用功能

移动端中：

Chrome Edge、前往特殊页面 ablout:inspect

火狐

搜索时打开新的窗口： browser.search.openintab

在新 tab 窗口打开 browser.tabs.loadBookmarksInTabs

使用高分辨率截屏：

Open the Console panel, run the command :screenshot --dpr 3 to take a high definition screenshot of the page with the device pixel ratio set to 3.

全屏截屏：

To capture a full page screenshot, just add --fullpage to the end and --screenshot .header to capture a screenshot of a node that can be identified by a selector.

谷歌

manifest.json

manifest 会在一个 JSON 文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。

{
  "name": "Every Day About You", // 扩展名称，加载扩展程序时显示的名称。
  "description": "Every Day About You", // 描述信息，用于描述当前扩展程序，限132个字符。
  "version": "1.0",  // 扩展程序版本号。
  "manifest_version": 2,  // manifest 文件版本号。chrome18 开始必须为2。
  "browser_action": {
    "default_icon": "ex_icon.png" // 设置扩展程序的图标。
  },
  "permissions": [
    "activeTab" // permissions：需要申请的权限，这里使用tab即可。
  ],
  "content_scripts": [ // 指定在页面中运行的js和css及插入时机。
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "demo.js",
        "canvas.js"
      ],
      "run_at": "document_start"
    }
  ],
  "chrome_url_overrides": { // chrome_url_overrides 覆盖一些 URL
    "newtab": "demo.html" // 新标签页打开的html文件。
  },
  "offline_enabled": true, // 脱机运行
}

lighthouse

一个掩耳盗铃的方式，将 lighthouse 改为 100%

if (window.trustedTypes && window.trustedTypes.createPolicy) {
    window.trustedTypes.createPolicy('default', {
        createHTML: (string, sink) => string
    });
}

$$('.lh-gauge__wrapper').forEach((wrapper, i) => {
    const percentage = wrapper.querySelector('.lh-gauge__percentage');
    let clone = percentage.cloneNode();
    clone.innerHTML = 100;
    wrapper.style.color = 'var(--color-pass-secondary)';
    wrapper.style.fill = wrapper.style.stroke = 'var(--color-pass)';
    wrapper.removeChild(percentage);
    wrapper.appendChild(clone);
    wrapper.querySelector('.lh-gauge-arc').style.strokeDasharray = '351.858,351.858';
});

浏览器扩展开发框架

• WXT：https://wxt.dev
• Plasmo

工具方法

一键下载网页中所有图片

$$('img').forEach(async (img) => {
 try {
   const src = img.src;
   // Fetch the image as a blob.
   const fetchResponse = await fetch(src);
   const blob = await fetchResponse.blob();
   const mimeType = blob.type;
   // Figure out a name for it from the src and the mime-type.
   const start = src.lastIndexOf('/') + 1;
   const end = src.indexOf('.', start);
   let name = src.substring(start, end === -1 ? undefined : end);
   name = name.replace(/[^a-zA-Z0-9]+/g, '-');
   name += '.' + mimeType.substring(mimeType.lastIndexOf('/') + 1);
   // Download the blob using a <a> element.
   const a = document.createElement('a');
   a.setAttribute('href', URL.createObjectURL(blob));
   a.setAttribute('download', name);
   a.click();
 } catch (e) {}
});

参考文章

作者	文章名称
蜡笔小心_	【程序员的浪漫】七夕到了，还不快给你女朋友做一个专属chrome插件