可点击弹出条目Google Chrome扩展

Clickable Popup Entries Google Chrome Extension

本文关键字：Google Chrome 扩展      更新时间：2023-09-26

当涉及到这些事情时，我是一个初学者，我无法理解文档，但是。。。

我想做的是，你点击page_action图标，它会弹出一个选项的小窗口，然后当用户点击其中一个选项时，它会在给定的页面上执行一个脚本（QCScript.js）（不在弹出窗口中）。

到目前为止，我得到的是：

manifest.json

{
    "manifest_version": 2,
    "name": "友達",
    "version": "1.00",
    "default_locale": "en",
    "description": "A helper program",
    "icons": {...},
    "background": {
        "scripts": ["eventPage.js"],
        "persistent": false
    }
    "page_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "友達".
        "default_popup": "popup.html"
    },
    "author": "ME",
    "permissions": [
        "tabs", "http://omfglibrariesarethebest.edu/*"
    ]
}

eventpage.js

document.getElementById("option1").onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {file: "QCScript.js"});
});

popup.html

<html>
<body>
    <p><a href="#" id="option1">Oh boy option 1</a></p>
</body>
</html>

QCScript.js

Unimportant because it works when pasted into the console.

总之，我希望它能弹出一个项目列表。然后，在这种情况下，当你点击"哦，男孩选项1"时，它会在QCScript.js中运行Javascript。当他们点击选项2时，它可以运行不同的脚本。

我只是。。。我不明白。

您当前的事件页面.js应该被更好地称为popup.js

<html>
<head><script src="popup.js"></script></head>
<body>
    <p><a href="#" id="option1">Oh boy option 1</a></p>
</body>
</html>

并确保您的代码只在DOM准备好后运行：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("option1").onClicked.addListener(function(tab) {
        chrome.tabs.executeScript(null, {file: "QCScript.js"});
    });
});

您需要一个新的eventpage.js来在适当的页面上显示页面操作图标。类似于：

function checkForValidUrl(tabId, changeInfo, tab) {
    if (tab.url.indexOf('example.com') > -1) {
        chrome.pageAction.show(tabId);
    }
};
chrome.tabs.onUpdated.addListener(checkForValidUrl);

相关文章：