如何从Chrome扩展程序的JS文件中调用特定功能

Question

我正在编写一个Chrome扩展程序，并且试图找出如何从background.js文件的script.js文件中调用特定函数。

到目前为止，我的background.js文件看起来像这样

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {file: "script.js"});
});

当用户选择扩展图标时，它将运行我的script.js文件中的所有js。

但是，我希望script.js包含两个函数，并且当用户选择扩展图标时，它将在每个函数之间切换。

例如，如果我的script.js文件看起来像

function makeChanges(){

 // some functinality

}


function undoChanges(){

  // some other functionality 

}

单击扩展程序图标时，我将如何特别运行其中一项功能？ 使用executeSript可以做到吗？

Answer 1

使用弹出...

因此，当用户单击图标时，您可以显示任何操作按钮。

chrome扩展程序：浏览器操作

Answer 2

如果要在不同情况下调用不同的函数，最好使用sendMessage（）

在将您的script.js加载到具有以下background.js的当前页面中之后：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {file: "script.js"});
});

您可以从background.js发送消息到注入的script.js ：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) 
{
    chrome.tabs.sendMessage(tabs[0].id, {'callFunction': 'makeChanges'});
    // OR
    chrome.tabs.sendMessage(tabs[0].id, {'callFunction': 'undoChanges'});
}

并在您的script.js中添加以下逻辑：

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) 
{ 
    if(request.callFunction === 'makeChanges')
        makeChanges();
    else
        undoChanges();
});