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://*/*"
    ]
}

清单中指定的每个文件都应与清单位于同一文件夹中。如果将它放在一个filder上，你就可以指定完整的路径。

然后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.
    })
}

您现在拥有的是一个后台脚本，它在您的WEBPAGE中插入一段代码。这段代码可以改变网页上的内容。你现在想做的是构建插入的脚本。如你所知，这只是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请求来检索该值。

Answer 2

我认为自动填充的最佳方法是使用content scripts。内容脚本是javascript文件，添加到具有预定义URL的页面中。如果按钮和浏览器扩展名是必须的，那么我会考虑在加载时将具有自动填充功能的内容脚本添加到页面中，然后尝试使用浏览器扩展名调用它。

使用镀铬扩展控制当前页面

2 个答案: