javascript - 使用 chrome 扩展程序控制当前页面

Question

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

Answer 1

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

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

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

然后是 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。

您要做的是以下内容。创建一个脚本，获取名称、值和访问数据库以获取自动完成答案所需的任何相关数据。接下来，您要让 在网页上运行的内容脚本 向扩展程序发送消息。您可以通过在脚本中添加以下命令来实现:

代码插入.JS:

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

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

现在内容试图告诉扩展一些东西，你必须在你的后台脚本中构建一个listener，这样你就可以对信息做一些事情。接下来您需要做的是向您的 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 请求来检索该值。