chrome插件开发入门01

最新推荐文章于 2024-06-20 14:48:45 发布

赢潇

最新推荐文章于 2024-06-20 14:48:45 发布

阅读量1.2k

点赞数 1

分类专栏： chrome插件开发文章标签： chrome

本文链接：https://blog.csdn.net/boommmmmmm/article/details/123794084

版权

chrome插件开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、创建清单
二、添加功能

前言

因为想要开发chrome插件只能找到基础性知识所以开始自己想办法学习

一、创建清单

创建一个名为manifest.json的文件

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3
}

其中name定义了拓展的名称
version定义了扩展的版本
description定义了扩展的描述

二、添加功能

1.在清单中注册后台脚本

扩展在该字段下的清单中注册其后台服务人员。"background"此字段使用"service_worker"指定单个 JavaScript 文件的键。

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
	"service_worker": "background.js"
}
}

2.创建后台脚本

此扩展在安装后将需要来自持久变量的信息。runtime.onInstalled首先在后台脚本中包含一个监听事件。在onInstalled侦听器内部，扩展将使用存储API 设置一个值。这将允许多个扩展组件访问该值并对其进行更新。在扩展的目录中创建一个名为background.js并添加以下代码的文件。

// background.js
let color = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('Default background color set to %cgreen', `color: ${color}`);
});

runtime.onlnstalled:首次安装扩展程序、扩展程序更新到新版本以及 Chrome 更新到新版本时触发。

3.添加储存权限

大多数 API，包括存储API，必须"permissions"在清单中的字段下注册，以便扩展使用它们。大多数 API，包括存储API，必须"permissions"在清单中的字段下注册，以便扩展使用它们。

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"]
}

4.引入用户界面

扩展可以有多种形式的用户界面；这将使用一个弹出窗口。创建并添加一个名为popup.html扩展目录的文件。这个扩展使用一个按钮来改变背景颜色。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

与后台脚本一样，必须在清单中声明此文件，以便 Chrome 将其显示在扩展程序的弹出窗口中。为此，请将一个action对象添加到清单并设置popup.html为操作的default_popup.

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

action:使用chrome.actionAPI 控制 Google Chrome 工具栏中的扩展程序图标。~~用来显示图标~~

这个弹出窗口的 HTML 引用了一个名为button.css. 将另一个文件添加到扩展的目录，然后添加以下代码。

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

工具栏图标的名称也包含action在该default_icon字段中。在此处下载 images 文件夹，解压缩，并将其放在扩展程序的目录中。更新清单，以便扩展知道如何使用图像。

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  }
}

扩展程序还会在扩展程序管理页面、权限警告和网站图标上显示图像。这些图像在清单中指定icons。

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

弹出 UI 的最后一步是为按钮添加颜色。创建一个以popup.js以下代码命名的文件并将其添加到扩展的目录中。

// Initialize button with user's preferred color
let changeColor = document.getElementById("changeColor");

chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

此代码popup.html从存储中获取按钮并请求颜色值。然后它将颜色应用为按钮的背景。popup.js在中包含一个脚本标签popup.html。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

重新加载扩展程序以查看绿色按钮。

5.层逻辑

该扩展现在有一个自定义图标和一个弹出窗口，它根据保存到扩展存储中的值为弹出按钮着色。接下来，它需要进一步的用户交互逻辑。popup.js通过将以下内容添加到文件末尾来更新。

// When the button is clicked, inject setPageBackgroundColor into current page
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// The body of this function will be executed as a content script inside the
// current page
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
}

更新后的代码click向按钮添加了一个事件侦听器，该事件侦听器会触发以编程方式注入的内容脚本。这会将页面的背景颜色变为与按钮相同的颜色。使用编程注入允许用户调用内容脚本，而不是自动将不需要的代码插入网页。

清单将需要activeTab允许扩展临时访问当前页面的scripting权限，以及使用脚本 APIexecuteScript方法的权限。

{
  "name": "Getting Started Example",
  ...
  "permissions": ["storage", "activeTab", "scripting"],
  ...
}

该扩展现在功能齐全！重新加载扩展程序，刷新此页面，打开弹出窗口并单击按钮将其变为绿色！

赢潇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
chrome插件开发入门01

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、创建清单二、添加功能1.在清单中注册后台脚本2.创建后台脚本总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、创建清单创建一个名为manifest.json的文件{ "name": "Getting Started Example",.
复制链接

扫一扫