快速上手开发chrome浏览器插件

最新推荐文章于 2024-04-27 10:30:00 发布

wbw1021

最新推荐文章于 2024-04-27 10:30:00 发布

阅读量251

点赞数 1

文章标签： chrome 前端 javascript

本文链接：https://blog.csdn.net/wbw1021/article/details/132897864

版权

快速上手开发chrome浏览器插件

写在前面
基于manifest V3的示例
代码调试与本地使用
扩展内容

写在前面

全文将通过一个示例教会大家如何开发chrome浏览器插件。经常和浏览器打交道的小伙伴们以后可以开发自己要用的插件啦

基于manifest V3的示例

下面做一个简单的示例为大家进行演示。插件功能是可以将用户当前打开的网页的标题复制到剪贴板中。

创建一个文件夹用于存放插件代码，文件夹目录如下：

manifest.json
popup.html
popup.js

manifest.json内容如下（常用的配置项已进行标注）

{
  "manifest_version": 3, // 注意这里Chrome已将扩展程序的manifest版本更为3 
  "name": "Copy Page Title", // 插件名
  "version": "1.0", // 插件版本
  "description": "Copies the title of the current page to the clipboard.", //插件描述
  "permissions": ["tabs"], // 用于声明插件所需的权限。这些权限允许插件访问浏览器的不同功能和 API
  "action": { // 用于指定当用户点击插件时要执行的操作
    "default_popup": "popup.html" // 指定插件的默认弹出窗口，用于在点击插件时打开
  }
}

popup.html内容如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Copy Page Title</title>
  <!-- 在这里引入popup要执行的代码逻辑 -->
  <script src="popup.js"></script>
</head>

<body>
  <h1>Copy Page Title</h1>
  <button id="copyButton">Copy Title</button>
</body>

</html>

popup.js内容如下

document.addEventListener("DOMContentLoaded", function () {
  const copyButton = document.getElementById("copyButton");
  copyButton.addEventListener("click", function () {
  	// 这里调用了chrome API -- chrome.tabs.query, 用于查询当前点击的标签页，返回标签页数组，取数组第一项即为当前点中的标签页
    chrome.tabs.query({ active: true }, (res) => {
      let title = res[0].title;
      copyTextToClipboard(title);
      alert("Copied title to clipboard!");
    });
  });
});

function copyTextToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.style.position = "fixed";
  textArea.style.top = 0;
  textArea.style.left = 0;
  textArea.style.width = "2em";
  textArea.style.height = "2em";
  textArea.style.padding = 0;
  textArea.style.border = "none";
  textArea.style.outline = "none";
  textArea.style.boxShadow = "none";
  textArea.style.background = "transparent";
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    let successful = document.execCommand("copy");
    let msg = successful ? "successful" : "unsuccessful";
    console.log("Copying text command was " + msg);
  } catch (err) {
    console.error("Oops, unable to copy", err);
  }
  document.body.removeChild(textArea);
}