Question

我想基于扩展程序弹出窗口创建Chrome扩展程序。弹出窗口包含两个按钮。单击按钮应将地址数据粘贴到网站上的文本框中。不幸的是，我无法填写相应的文本框，可能是因为无法通过扩展程序弹出窗口访问网站上的文本框。

我读到了一些可能有用的contentscript.js - 由于我在JavaScript和Chrome扩展程序方面经验不足，我无法在扩展程序中实现如何实现contentscript.js。任何有助于我找到解决问题的方法的帮助表示赞赏。

的manifest.json：

{
    "manifest_version": 2,
    "name": "Paste Address",
    "version": "2.0",
    "author": "STM",
    "description": "Paste Address",
    "permissions": ["tabs"],
    "icons": {"16": "btn_edit.png", "48": "btn_edit.png", "128": "btn_edit.png"},
    "browser_action": {"default_icon": "btn_edit.png", "default_popup": "popup.html"}
}

popup.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/options_popup.css" />
    </head>
<body>          
        <section> 
            <button id="address1">Address1</button>
        </section>
        <section> 
            <button id="address2">Address2</button>
        </section>
        <script src="scripts/popup.js"></script>
    </body>
</html>

popup.js

function address1() {
    alert("address1");
    document.forms["ModalBoxAddress_form"].elements["firstname"].value = "firstname1";
    document.forms["ModalBoxAddress_form"].elements["lastname"].value = "lastname1";
    document.forms["ModalBoxAddress_form"].elements["street"].value = "street1";
}

function address2() {
    alert("address2");
    document.forms["ModalBoxAddress_form"].elements["firstname"].value = "firstname2";
    document.forms["ModalBoxAddress_form"].elements["lastname"].value = "lastname2";
    document.forms["ModalBoxAddress_form"].elements["street"].value = "street2";
}

button_click = document.querySelector('#address1').addEventListener('click',function() {address1();}, false);
button_click = document.querySelector('#address2').addEventListener('click',function() {address2();}, false);

Answer 1

从Architecture Overview开始。

它将解释为什么您需要content script。

你的弹出窗口是一个HTML页面;因此，其中的document指的是它自己。您无法从其中的“打开”标签中“查找”元素。

首先，您需要访问该页面的权限。值得庆幸的是，"activeTab" permission正是您所需要的。

然后，您可以使用chrome.tabs.executeScript API在当前打开的选项卡中执行脚本，也称为“程序注入”。

最好为内容脚本创建单独的.js文件并执行该文件。

所以，例如：

// Make this a separate file address1.js
document.forms["ModalBoxAddress_form"].elements["firstname"].value = "firstname1";
document.forms["ModalBoxAddress_form"].elements["lastname"].value = "lastname1";
document.forms["ModalBoxAddress_form"].elements["street"].value = "street1";

你的popup.js：

function address1() {
    chrome.tabs.executeScript({file: "address1.js"});
}

document.querySelector('#address1').addEventListener('click', address1);

与您的第二个地址相同。

请注意，您的内容脚本现在在单独的上下文中执行，无法直接访问popup.js中的数据。如果您需要传递一些数据，chrome.storage或Messaging会有所帮助。 但是，正如他们所说，这是另一个故事。

Chrome扩展程序：弹出窗口来操纵网站上的文本框

1 个答案: