Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【学习】【01】谷歌浏览器插件入门 #79

Open
yanlele opened this issue Apr 27, 2024 · 0 comments
Open

【学习】【01】谷歌浏览器插件入门 #79

yanlele opened this issue Apr 27, 2024 · 0 comments
Labels
谷歌浏览器扩展程序

Comments

@yanlele
Copy link
Owner

yanlele commented Apr 27, 2024

插件入门

谷歌浏览器扩展程序， 俗称 - 谷歌插件

只要是使用谷歌内核的浏览器都是可以使用的。

谷歌浏览器（Google Chrome）的扩展程序可以增加浏览器的功能性，它们是独立的小程序，可以改变浏览器的外观、拦截广告、帮助用户自动填写表单、提供临时邮箱服务、密码管理、自动翻译网页、提供新标签页的定制内容等。

它可以完成很多 web 前端很多无法做到的事情， 可以调用一些列的系统级别的 api , 对很多一些已经上线的三方前端应用做劫持和修改。 其强大能力不多细说了。

你的第一个浏览器扩展程序

直接上干货

在根目录 新建 manifest.json 的新文件。此 JSON 文件描述了扩展程序的功能和配置。例如，大多数清单文件包含一个 "action" 键，用于声明 Chrome 应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML 页面。

manifest.json 配置

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world",
  "description": "hello world",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

这里先简单说几个必填字段的含义

下面是一个表格，简要说明了您提供的manifest.json文件中每个键的含义：

Key 含义
manifest_version 声明该清单文件使用的版本。当前，Chrome 扩展程序支持2和3两个版本的清单。这里使用的是版本3。
name 扩展程序的名称，将显示在 Chrome 扩展程序商店和工具栏上。
description 扩展程序的简短描述，通常会显示在扩展程序详情页面上。
version 扩展程序的版本号。
action 配置扩展程序的行为（manifest_version: 2）。在 manifest_version: 3 中通常使用action去定义浏览器动作和页面动作。
action.default_popup 为浏览器操作按钮定义弹出内容的 HTML 文件名。当用户点击工具栏上该扩展的图标时，会显示这个 HTML 页面。
action.default_icon 定义扩展程序在工具栏上显示的图标。支持多种尺寸，确保扩展在不同大小的工具栏上都具有合适显示效果。

请注意，自manifest_version 3起没有browser_action或page_action的区别。取而代之的是统一使用action，且不再指定特定的类型。此外，manifest.json 3 版本中也使用了许多新的概念和 API，因此如果需要详细的信息，建议参考 Google Chrome 扩展开发文档。

htmml + icon

default_popup 是描述插件点击之后的界面， default_icon 就是插件的图标了。

直接防止在 manifest.json 同级目录就可以。 当然也可以配置相对路径。

这里关于 icon 最好在做一下多场景 icon 配置

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world",
  "description": "hello world",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

不同数字倍数的 icon 可以放不同的倍图， 而且都会根据倍数， 显示在不同的位置

图标大小 图标的使用场景
16x16 扩展程序页面和上下文菜单上的网站图标
32x32 Windows 计算机通常需要此大小
48x48 显示在“扩展程序”页面上
128x128 安装时会显示在 Chrome 应用商店中

关于 html

这个就没啥好说的。

直接上 html 片段即可， 可以在 html 里面插入 JS 和 CSS 代码

hello.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World with Extensions - 晴小篆</h1>
    <p>我想测试一下中文可以输入吗？</p>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

console.log("hello world");

在浏览器扩展中运行你的插件程序

  1. 在浏览器中访问 chrome://extensions/ , 或者 访问[浏览器设置] --> [扩展程序] --> [管理扩展程序]

image.png

  1. 点击开发者模式旁边的切换开关以启用开发者模式。
  2. 点击 Load unpacked（加载解压缩）按钮，然后选择扩展程序目录。
    image.png

然后你就得到你的扩展程序了。

点击你的扩展程序， 即可看到你的 html popup 内容了

image.png

image.png

调试 JS

要在控制台中查看这条消息的记录，请按以下步骤操作：

  1. 打开弹出式窗口。
  2. 右键点击弹出式窗口。
  3. 选择检查。
    image.png
  4. 检查弹出式窗口。
    image.png

使用 TypeScript

如果您使用 VSCode 或 Atom 等代码编辑器进行开发，可以通过 npm 软件包 chrome-types 来利用 Chrome API 的自动填充功能。当 Chromium 源代码发生更改时，此 npm 软件包会自动更新。

装个包

npm init

pnpm install typescript chrome-types typescript-transform-paths

然后初始化一个 tsconfig.json

这里直接贴我的配置

{
  "ts-node": {
    "transpileOnly": true,
    "require": ["tsconfig-paths/register"]
  },
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "@utils/*": ["utils/*"],
      "@src/*": ["src/*"]
    },
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

但是记住浏览器是只能使用 JS 文件， 所以编写完了 TS 文件之后， 记得使用 tsc 编译成 JS 即可。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
谷歌浏览器扩展程序
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yanlele and others