在 Chrome 扩展中获取选定的文本

Question

我正在尝试创建一个 Chrome 扩展，允许用户在单击按钮后获取网页的 selected 文本，然后将此文本记录在控制台中。

但我的代码只有在 select 从 HTML 弹出窗口编辑文本时才有效。如果我 select 来自随机网页的文本，然后单击“保存”按钮，那么控制台中会打印一个空白行。

我想我的 content.js 文件在显示扩展弹出窗口时无法与网页交互，但我不知道如何解决这个问题。我知道还有其他类似的问题，但我没有尝试（例如，在不同的 .js 文件之间传递消息）。

这是我的文件：

manifest.json :

{
"manifest_version": 3,
"version": "1.0",
"name": "test",
"action": {
    "default_popup": "index.html"
},
"permissions": [
    "tabs",
    "notifications"
],
"content_scripts": [
{   "matches": ["<all_urls>"],
    "js" : ["content.js"]}
],
"background":
{
"service_worker": "background.js"
}}

index.html :

<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p>Just some text.</p>
    <button id="save-btn">SAVE SELECTION</button>
    <script src="content.js"></script>
</body>
</html>

content.js :

const saveBtn = document.getElementById("save-btn")

saveBtn.addEventListener("click", function(){
console.log(window.getSelection().toString())
})

Answer 1

从 index.html 中删除 content.js。内容脚本用于网页，不适用于弹出窗口等扩展页面。

创建index.js并加载到index.html:

  <script src="index.js"></script>
</body>

index.js:

document.getElementById("save-btn").onclick = async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
  let result;
  try {
    [{result}] = await chrome.scripting.executeScript({
      target: {tabId: tab.id},
      function: () => getSelection().toString(),
    });
  } catch (e) {
    return; // ignoring an unsupported page like chrome://extensions
  }
  document.body.append('Selection: ' + result);
};

编辑 manifest.json 以允许在单击时在活动选项卡中注入代码：
```
"permissions": ["scripting", "activeTab"]
```

请注意，弹出窗口是一个单独的 window，因此它有自己独立的开发工具和控制台：在弹出窗口内右键单击并 select 在菜单中“检查”。

在 Chrome 扩展中获取选定的文本

Getting selected text in a Chrome extension

javascript

google-chrome

google-chrome-extension

chrome-extension-manifest-v3