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

Posted 2021-04-05

我正在写一个Chrome扩展程序，我试图找出如何从script.js文件中的background.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吗？

答案

使用弹出窗口...

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

chrome extension: browser action

另一答案

如果你想在不同的情况下调用不同的函数 - 最好使用sendMessage（）

使用folowing background.js将script.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();
});