Question

我的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>

单击“确定”按钮后，将在后台控制台中写入用户名，密码和令牌，然后显示此错误。

无法访问网址的内容   “铬扩展：//di***cb/dialog.html”。

扩展程序清单必须请求访问权限   host。（匿名函数）@ background.js：39target。（匿名   函数）@ extensions :: SafeBuiltins：19safeCallbackApply @   extensions :: sendRequest：21handleResponse @ extensions :: sendRequest：72

所以我想要实现的功能非常简单，用户点击图标 - ＆gt;午餐弹出 - ＆gt;类型信息 - ＆gt;接受 - ＆gt;在内容脚本中进一步使用该信息。

Answer 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

Chrome - 扩展程序：从background.js向content.js

1 个答案: