chrome插件：Click to copy the current tab‘s title and URL to the clipboard.

最新推荐文章于 2024-11-04 20:49:44 发布

llrraa2010

最新推荐文章于 2024-11-04 20:49:44 发布

阅读量268

点赞数 7

分类专栏： chrome 大模型文章标签： chrome 前端

本文链接：https://blog.csdn.net/llrraa2010/article/details/142906702

版权

chrome 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

大模型

6 篇文章 0 订阅

订阅专栏

创建一个Chrome插件来复制当前标签页的标题和网址到剪贴板，你需要编写几个文件，包括一个manifest文件（插件的配置文件），一个背景脚本（background script），以及一个可选的弹出页面（popup）。以下是一个简单的示例，展示了如何实现这个功能：

manifest.json - 插件的配置文件

{
  "name": "Offscreen API - Clipboard",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Shows how to write a string to the system clipboard using the offscreen document.",
  "background": {
    "service_worker": "background.js"
  },
  "action": {    "default_icon": "icon.png"
	},
  "permissions": ["offscreen", "clipboardWrite", "activeTab", "tabs"]
}

background.js - 背景脚本，处理点击事件

// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// The value that will be written to the clipboard.
let textToCopy = `Hello world!`;

// When the browser action is clicked, `addToClipboard()` will use an offscreen
// document to write the value of `textToCopy` to the system clipboard.
chrome.action.onClicked.addListener(async () => {


  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const title = activeTab.title;
  const url = activeTab.url;
  // const textToCopy = title + '\n' + url;
   textToCopy = title + ': ' + url;

	
  await addToClipboard(textToCopy);
});

// Solution 1 - As of Jan 2023, service workers cannot directly interact with
// the system clipboard using either `navigator.clipboard` or
// `document.execCommand()`. To work around this, we'll create an offscreen
// document and pass it the data we want to write to the clipboard.
async function addToClipboard(value) {
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.CLIPBOARD],
    justification: 'Write text to the clipboard.'
  });

  // Now that we have an offscreen document, we can dispatch the
  // message.
  chrome.runtime.sendMessage({
    type: 'copy-data-to-clipboard',
    target: 'offscreen-doc',
    data: value
  });
}

// Solution 2 – Once extension service workers can use the Clipboard API,
// replace the offscreen document based implementation with something like this.
// eslint-disable-next-line no-unused-vars -- This is an alternative implementation
async function addToClipboardV2(value) {
  navigator.clipboard.writeText(value);
}

popup.html - 弹出页面（可选）

<!DOCTYPE html>
<html>
  <head>
    <title>Copy Tab Info</title>
    <style>
      body {
        width: 200px;
        height: 100px;
        margin: 15px;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Copy Tab Info</h1>
    <p>Click the extension icon to copy the current tab's title and URL to clipboard.</p>
  </body>
</html>