Chrome - 扩展：将消息从 background.js 发送到 content.js 时出错答案

【问题标题】：Chrome - Extension: Error when sending messages from background.js to content.jsChrome - 扩展：将消息从 background.js 发送到 content.js 时出错
【发布时间】：2015-11-24 17:24:44
【问题描述】：

我的 chrome-extension 执行以下操作：

1)当用户点击应用程序的图标时，会触发一个新的弹出页面，其中包含 3 个要完成的字段。

2) 当按下提交按钮时，将调用 getBackgroundPage() 并将输入值存储在 background.js 中。

3) 在将这些值存储在后台之后，我想以某种方式在我的内容脚本中使用它们。我知道每个选项卡都是一个新进程，它们之间的消息发送有点棘手，并且是异步完成的，但应该有一个简单的方法来做到这一点。如果您确实有可行的解决方案，请尽可能明确！

代码如下：

Manifest.js

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "icon.png"

  },

  "background": {
      "scripts": ["background.js"],
      "persistent": false
  },
  "permissions": [
    "tabs", "<all_urls>","storage" , "activeTab"
    ],

"content_scripts": [
    {
      "matches": [ "https://www.linkedin.com/*"],
      "js": ["userInfo.js"]
  }] 

}

Background.js

chrome.browserAction.onClicked.addListener(function(tab) {
      { 
        chrome.tabs.create({
            url: chrome.extension.getURL('dialog.html'),
            active: false
        }, function(tab) {
            localStorage["tabid"]=tab.id;

            chrome.windows.create({
                tabId: tab.id,
                type: 'popup',
                focused: true,
                height: 350, width:400

            });
        });
    }

     return true;
});





function setCredentials(username,password,token) {

    console.log(username);
    console.log(password);
    console.log(token);


{  
    chrome.tabs.executeScript( parseInt(localStorage.tabid), {
        file: "userInfo.js"
    }, function() {
        if (chrome.runtime.lastError) {
            console.error(chrome.runtime.lastError.message);
        }
    });

    }


};

Dialog.js

document.forms[0].onsubmit = function(e) {
    e.preventDefault(); // Prevent submission
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var token= document.getElementById('token').value;
    chrome.runtime.getBackgroundPage(function(bgWindow) {
        bgWindow.setCredentials(username,password,token);
        window.close();     // Close dialog
    });
};

userInfo.js

 alert("got it");

Dialog.html

 <!DOCTYPE html>
 <html>   
   <head> 

    <style> 
      #leadinformation { text-align: left; font: 16px; position :absolute; padding:20px 20px 20px 20px; } 
       #formwrapper {padding:10px 20px 20px 20px; width:200px;}
       #formsubmit {padding:0px 20px 20px 25px;}
      leadinformation input{ position:relative;}

      #ok { position: relative; top: 30%;  font-family: Arial;font-weight: bold; font-size: 13px; color: #ffffff; padding: 5px 5px 5px 5px;background-image: webkit-linear-gradient(top, #287bbc 0%,#23639a 100%);background-color: #287bbc; border-width: 1px; border-style: solid; border-radius: 3px 3px 3px 3px; boder-color: #1b5480; width: 160px; height: 35px;} 
      #titleParagraph {font-weight:bold; font-size:20px;} 
    </style>  
  </head> 
   <body> 



        <div id="leadinformation"> 
          <p id="titleParagraph">Provide your Salesforce login information!</p> 
          <form>
            <div id="formwrapper">
               Username: <input id="username" type="username">
               Password: <input id="password" type="password">
               Security Token: <input id="token" type="token">
             </div>

             <div id="formsubmit">
                <input id="ok" type="submit" value="OK">
             </div>

          </form>
            <script src="dialog.js"></script>
        <div> 


     </div> 
    </body> 
   </html>

点击确定按钮后，用户名、密码和令牌被写入后台控制台，随后出现此错误。

无法访问 url 的内容 “chrome-extension://di***cb/dialog.html”。

扩展清单必须请求权限才能访问此 host.(匿名函数)@background.js:39target.(匿名函数）@ extensions::SafeBuiltins:19safeCallbackApply @ extensions::sendRequest:21handleResponse @ extensions::sendRequest:72

所以我想要实现的功能很简单，用户点击图标 -> 午餐弹出窗口 -> 输入信息 -> 接受 -> 在内容脚本中进一步使用信息。

【问题讨论】：

Pass multiple variables to content script chrome的可能重复

标签： javascript jquery ajax google-chrome google-chrome-extension

【解决方案1】：

我找到了使用 localStorage 的方法：

在 background.js 我添加了一个 onMessage 监听器来与我的内容脚本对话

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getStatus")
      sendResponse({status: localStorage['username']});
    else
      sendResponse({}); // snub them.
});

我在 setCredentials() 方法中使用 localStorage

function setCredentials(username,password,token) {

     localStorage['username']=username;
}

在 userInfo.js 中，每次加载页面时，我都会为用户单击“确定”按钮时更新的 localStorage 值请求背景。

chrome.runtime.sendMessage({method: "getStatus"}, function(response) {
  console.log(response.status);
});

现在我可以在内容脚本中的任何地方使用 localStorage 中的这些值：D

【讨论】：