Chrome 扩展：弹出来操作网站上的文本框答案

【问题标题】：Chrome extension: popup to manipulate textboxes on a websiteChrome 扩展：弹出来操作网站上的文本框
【发布时间】：2015-02-22 12:28:21
【问题描述】：

我想创建一个基于扩展弹出窗口的 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);

【问题讨论】：

标签： javascript google-chrome google-chrome-extension

【解决方案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 会有所帮助。 但是，正如他们所说，那是另一回事了。

【讨论】：