如何使用浏览器扩展的上下文菜单插入文本？

Question

我想创建一个扩展，通过右键单击上下文菜单图标来插入日期和时间，作为开始学习 javascript 和基于 Web 的开发的方法（我的经验完全是 java 和 python）。我认为我的想法足够简单，并且我能够通过在线查找相关信息来设置扩展的骨架。我只是坚持实际插入文本，这是扩展的唯一实际目的。我确信当我查资料时我只是问了错误的问题，但我一生都无法弄清楚如何完成我想要的事情。

这是我到目前为止所拥有的（不包括 popup.html）：

manifest.json：

{
    "manifest_version": 3,
    "name": "Date Stamp",
    "version": "1.0",
    "description": "Inserts the current date and time at the cursor.",
    "permissions": ["contextMenus", "activeTab"],
    "background": {
        "service_worker": "background.js"
  },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icon.png"
    }
}

背景.js：

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        title: 'Insert Date Stamp',  //this will show up in the context menu
        contexts: ['all'],      //this is used to tell when our context menu item should be displayed, I believe editable will restrict it to text boxes and the like
        id: 'dateStamp'
    });
})

内容.js：

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (info.menuItemId === "insertText") {
        chrome.scripting.executeScript({
        target: {tabId: tab.id},
        function: insertTextFunction
        });
    }
});

function insertTextFunction() {
    var activeElement = document.activeElement;
    if (activeElement.tagName.toLowerCase() === "input" || activeElement.tagName.toLowerCase() === "textarea") {
        activeElement.value += "Test text";
    }
}

上下文菜单项出现，我可以单击它，但什么也没有发生。我尝试将 console.log 消息放在不同的位置，看看是否可以找出代码未执行的位置，但控制台中没有显示任何内容。

我也愿意接受这样的可能性：这不是一个初学者级别的项目，一旦我在这方面有更多的经验，我也许应该回到它。

Answer 1

感谢wOxxOm的回答！

1. 将content.js的内容移动到background.js的底部
2. 删除 content.js 和清单中“content_scripts”的部分
3. 将“脚本”添加到清单中的“权限”

这是更新后的代码：

manifest.json：

{
    "manifest_version": 3,
    "name": "Date Stamp",
    "version": "0.6",
    "description": "Inserts the current date and time at the cursor.",
    "permissions": ["contextMenus", "activeTab", "scripting"],
    "background": {
        "service_worker": "background.js"
  },
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icon.png"
    }
}

背景.js：

chrome.contextMenus.create({
    title: 'Insert Date Stamp',
    contexts: ['editable'],
    id: 'dateStamp'
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
    if (info.menuItemId === "dateStamp") {
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            function: insertTimeStamp
        });
    }
});

function insertTimeStamp() {
    var activeElement = document.activeElement;
    if (activeElement.tagName.toLowerCase() === "input" || activeElement.tagName.toLowerCase() === "textarea") {
        let now = new Date()
        activeElement.value += now.toLocaleString();
    }
}