Question

对于这些事情，我是初学者，我无法弄清楚文档，但是......

我想要做的是你点击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。当他们单击选项二时，它可以运行不同的脚本。

我只是......我没理解。

Answer 1

您当前的 eventpage.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);

可点击弹出条目Google Chrome扩展程序

1 个答案: