使用 chrome 扩展控制当前页面

Question

对于 chrome 扩展来说非常陌生，我正在制作一个自动填充扩展，您可以在其中按下 popup.html 上的按钮，它会填充您的信息。我如何在 popup.html 中对按钮进行编码，以便在单击该按钮时执行自动填充 .js 文件来填充信息？提前致谢

Answer 1

我的建议是执行以下操作。松开弹出窗口！当您单击扩展程序图标时，执行自动填充操作。您可以使用背景页面来执行此操作。为了帮助您找到方法，我将添加三个文件的基础，因为 chrome 扩展上的 google 页面对于初学者来说不是很清楚。

首先是MANIFEST.JSON：

{
    "manifest_version": 2,
    "name": "your extension name",
    "version": "1.0.0",
    "description": "Your extension's discription",
    "icons": {
        "16" : "icon.png",
        "48" : "48.png",
        "128" : "128.png"
    },
    "background": {
        "scripts": ["background.js"]    
    },
    "page_action": {
        "default_title": "Your tooltip",
        "default_icon": "icon.png"
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "https://*/*"
    ]
}

清单中指定的每个文件都应与清单位于同一文件夹中。如果将其放在文件夹中，则必须指定完整路径。

然后BACKGROUND.JS（这是始终打开的 JavaScript 文件，无论什么网站）：

chrome.pageAction.onClicked.addListener(click);
        //When the icon is clicked -> click() will be executed
chrome.tabs.onUpdated.addListener(check);
        //When a tab is changed -> check() will be executed


function check(tab_id, data, tab){
    if(tab.url.match(/example.com/)){
           //if the url of the tab matches a certain website 
        chrome.pageAction.show(tab_id);
        //show the icon (by default it is not shown).
        chrome.tabs.executeScript(tab_id, {code:"var tab_id = '" + tab_id + "'"});
        //executes JS code on the WEBPAGE ON THE SCREEN ITSELF.
        //YOUR EXTENSIONS JAVASCRIPT AND CONTENT SCRIPTS ARE SEPERATE ENVIRONMENTS
    }
}


function click(){
    chrome.tabs.query({currentWindow: true, active : true},function(tab){
    //checks the tab ID of the currently open wndow
        chrome.tabs.executeScript(tab.id, {file: codeToInsert.js});
        //executes a script from the file codeToInsert.js.
    })
}

您现在拥有的是一个后台脚本，它会在您的网页中插入一段代码。这段代码可以改变网页上的内容。您现在要做的是构建要插入的脚本。正如你所知，这只是 JS。

您想要做的事情如下。创建一个获取name, value and any relevant data you need to acces your database for autocomplete answers. 接下来，您将向content script that runs on the webpage扩展程序发送一条消息。您可以通过在脚本中添加以下命令来做到这一点：

CODETOINSERT.JS:

chrome.extension.sendMessage({type: "text", name: "emailadres", value: "makinganExtension@examp", tab_id: tab_id});

这句话基本上是在向您的分机喊话。它在 中喊出数据JSON format。您可以根据需要更改所有变量。我添加了 tab_id （这是我们之前存储在网页内容中的 var），以便后台页面知道请求来自哪里。稍后这会更容易，因为您可能会有一些回调函数，其中tab_id您可以轻松地告诉扩展在哪个选项卡上执行操作。

现在，内容试图告诉扩展程序一些信息，您必须listener在您的扩展程序中构建一个background script，以便您可以使用该信息执行某些操作。您需要做的下一件事是将另一个代码块添加到您的BACKGROUND.JS：

chrome.extension.onMessage.addListener(
//tells the extension to listen to messages sent by content scripts
    function(request,sender, sendResponse){
    //anonymous function that is being called, several parameter are passed, from which the first 'request', is the most interesting.
        insert_field_value(request.type,request.name,request.value,request.tab_id);
        //the function 'insert_field_value' will be executed and the parameters from the json will be passed. (You can also pass  the whole var 'request'.
    }
);

现在您必须自己创建函数 insert_field_value 。在此函数中，您可以像我们之前在后台页面中执行的方式一样执行脚本。然而。最好只发送一段代码，如下所示：

chrome.tabs.executeScript(tab_id, {code:"changeValue(tab_id = '" + tab_id + "'")});
//Make sure tab_id is the value passed by the content script

想一想吧！已经插入了一个名为“codeToInsert.js”的 JavaScript 文件。您可以在此处构建另一个函数。您现在要做的就是像我上面展示的那样调用它。这样您就不必每次都插入函数。一开始传递所有变量可能有点棘手，但我相信您会弄清楚的；）。

如果您将所有信息粘贴到此处，请查看：https://developer.chrome.com/extensions/getstarted。你会明白的。祝你好运！

ps..后台脚本可以发出AJAX请求，因此如果您需要获取要插入的值，您可以创建一个AJAX请求来检索该值。