Javascript Chrome扩展在两个选项卡上工作_Javascript_Google Chrome_Google Chrome Extension

Javascript Chrome扩展在两个选项卡上工作

javascript google-chrome google-chrome-extension

Javascript Chrome扩展在两个选项卡上工作,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我正在尝试创建一个Chrome扩展，它从当前选项卡的DOM中检索一些内容，然后打开一个新选项卡，并使用以前检索到的内容在此新选项卡上执行操作我正在尝试使用回调来执行此序列，但我无法找到正确的方法。现在我可以执行第一个脚本，并从当前选项卡DOM中获取内容：我仍然无法将此内容传递给第二个脚本utilities2.js，以便在新选项卡上执行以下是我当前的代码： popup.html <!doctype html> <html> <head><

我正在尝试创建一个Chrome扩展，它从当前选项卡的DOM中检索一些内容，然后打开一个新选项卡，并使用以前检索到的内容在此新选项卡上执行操作

我正在尝试使用回调来执行此序列，但我无法找到正确的方法。现在我可以执行第一个脚本，并从当前选项卡DOM中获取内容：我仍然无法将此内容传递给第二个脚本utilities2.js，以便在新选项卡上执行

以下是我当前的代码：

popup.html

<!doctype html>  
<html>  
    <head><title>Extension</title></head>  
<body>  
    <button id="clickactivity">Click here</button>  
    <script src="popup.js"></script> 
</body>
</html>

contentScript.js

function execContentScript() {

    var code = document.getElementById('textarea').value;
    return code;

}

execContentScript();

manifest.json

{
    "manifest_version": 2,
    "name": "My extension",  
    "description": "My extension",  
    "version": "1.0",    
    "permissions": ["tabs", "<all_urls>","activeTab"],  

    "browser_action": { 
        "default_popup": "popup.html"  
    }
}

{
“清单版本”：2，
“名称”：“我的分机”，
“说明”：“我的分机”，
“版本”：“1.0”，
“权限”：[“选项卡”、“”、“活动选项卡”]，
“浏览器操作”：{
“默认弹出窗口”：“popup.html”
}
}

您可以将内容存储在Chrome extension的本地存储中，导航到下一个选项卡后，您可以从Chrome的本地存储中获取内容

在这种情况下，以下代码可能会对您有所帮助：

chrome.storage.local.set({key: value}, function() {
      console.log('Value is set to ' + value);
    });

    chrome.storage.local.get(['key'], function(result) {
      console.log('Value currently is ' + result.key);
    });

如果您想了解有关Chrome本地存储的更多信息，请阅读

编辑：

我想你不知道Chrome扩展中的背景脚本。具有运行Chrome命令的最高权限的后台脚本

完整的工作流程如下所示：

popup.js包含在脚本中
单击按钮时，将从popup.js调用injectTheScript函数
然后它将从页面中获取元素id，然后将请求发送到background.js
然后background.js将该值保存到Chrome存储中
然后background.js将创建新选项卡
tab创建成功后，执行回调函数，从Chrome的存储器中获取值

以下是工作扩展的完整代码：

manifest.json

{
"manifest_version": 2,
"name": "My extension",
"description": "My extension",
"version": "1.0",
"permissions": ["tabs", "<all_urls>","activeTab","storage"],

"browser_action": {
  "default_popup": "popup.html"
},
"background": {
  "scripts": ["background.js"],
  "persistent": false
}
}

background.js

function injectTheScript() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

    var code="abc";
    //var code = document.getElementById('textarea').value;

    chrome.runtime.sendMessage({type: "navigate",value:code}, function(response) {
        console.log('code saved to local storage');

    });

});

}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

if (request.type == "navigate"){

        chrome.storage.sync.set({key: request.value}, function() {

        console.log('Background got request for saving the code '+request.value+' to local storage');


        chrome.tabs.create({"url":"http://www.google.com","selected":true}, function( tab) {


            console.log('navigated to new tab');
            chrome.storage.sync.get(['key'], function(result) {

                console.log('new tab key is '+result.key);

            });


        });


    });

 }



});

您不需要utilities2.js和content_script.js

我已经测试了代码，它的工作符合您的要求

如果后台页面中有任何控制台，则无法看到控制台输出。要在控制台上查看输出（查看后台的任何内容），请打开链接chrome://extensions 然后单击按钮背景页，如下所示

将出现一个新窗口，如下所示

我已经更新了答案。请看一下最新的答案。谢谢。请确保当您单击chrome extension中的按钮时，必须有一个名为textarea的文本框。请共享更新的代码。无法确切说明您在哪个页面单击扩展按钮？是html文件吗？

function injectTheScript() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

    var code="abc";
    //var code = document.getElementById('textarea').value;

    chrome.runtime.sendMessage({type: "navigate",value:code}, function(response) {
        console.log('code saved to local storage');

    });

});

}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

if (request.type == "navigate"){

        chrome.storage.sync.set({key: request.value}, function() {

        console.log('Background got request for saving the code '+request.value+' to local storage');


        chrome.tabs.create({"url":"http://www.google.com","selected":true}, function( tab) {


            console.log('navigated to new tab');
            chrome.storage.sync.get(['key'], function(result) {

                console.log('new tab key is '+result.key);

            });


        });


    });

 }



});