javascript - chrome 扩展 - 使用 django 后端登录 popup.html

Question

我正在尝试完成此登录过程。

在扩展中，照例有popup.html、popup.js、background.js和content.js。

在popup.html 中，有用户名和密码输入框和登录按钮。

我的设想是:我将在 popup.js 中捕获两个输入并将它们发送到 background.js，然后从那里将它们发送到 django 后端。 django 后端返回登录 token 。

首先，这种方式可行吗？

我的第一步不起作用:我无法将消息从 popup.js 发送到 background.js。控制台没有错误，也没有成功。这是我的代码:

弹出窗口

handleLoginClick_: function(){
  var email = this.email.value;
  var pwd = this.pwd.value; 
  chrome.tabs.sendMessage(tab.id, {asking: "login"}, function(response) {
    sendToDjango(response.answer);
  });
}

背景.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { 
  if (request.asking === "login"){
    console.log('got msg from popup.js');
    return;
  } 
});

我做错了什么？

这是 manifest.json:

{
"name" : "myBIZMark",
"version" : "1.1",
"description" : "collect competing company's keywords",
"permissions": [
  "tabs", "contextMenus", "<all_urls>", "storage"
],
"browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
},  
"background": {
  "persistent": false,
  "scripts": ["jquery111.js","background.js"]
},
"manifest_version": 2,
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["jquery111.js", "contentscript.js","popup.js"]
  }
]
}

Answer 1

您在 popup.js 中的消息针对的是内容脚本，而不是后台页面。您需要使用 chrome.runtime，而不是 chrome.tabs。

替换:

chrome.tabs.sendMessage(tab.id, {asking: "login"}, function(response) {
  sendToDjango(response.answer);
});

与:

chrome.runtime.sendMessage({asking: "login"}, function(response) {
  sendToDjango(response.answer);
});

总结:

chrome.tabs.sendMessage = 背景 -> 内容

chrome.runtime.sendMessage = 内容 -> 背景