Question

这是我的popup.html：

<!DOCTYPE html>
    <html lang="en">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="script.js"></script>
    <script src="popup.js"></script>
      <head>
          <meta charset="utf-8">
          <title> Chrome Extension</title>
          <link rel="stylesheet" href="style.css" />
      </head>
      <body id="container">
        <div id="left">
          <form>
          <div class="input-wrapper">
            <input type="text" id="query" />
            <button id="openBackgroundWindow">Open background window</button>
          </div>
            <input type="submit" id="button" value="Search" alt="Loading" />
        </form>
        <!-- rest of the code will follow this -->
        <!-- other code above -->
      <div id="results">
        <ul id="results-list">
          <!-- this gets populated -->
        </ul>
      </div>
    </div> <!-- end #left -->
      </body>
    </html>

这是我的popup.js：

$("#openBackgroundWindow").click(function(){

    login();
     chrome.extension.sendRequest({ msg: "login" });

});

function openNextPage(){  
 var bg = chrome.extension.getBackgroundPage().openNextPage();
}  

function pageRender(){
console.log("no user")
  if (localStorage.getItem("username") == null){
    console.log("no user")
  }

    function codeAddress() {
        document.getElementById('button').style.visibility='hidden'; 
    }

}

function login(){

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/login", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
  }
}

xhr.send();
}

这是我的background.js：

function login(){

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:3000/login", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
  }
}

xhr.send();
}


chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse){
        print "hello";
        if(request.msg == "login") login();
    }
);

没有调用background.js中的login（）函数，也没有调用popup.js中的login函数。可能是什么问题？

Answer 1

它对我有用

使用<script src="jquery.min.js"></script>

而不是

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

因为它违反了以下内容安全策略指令。下载min js并将其放入包中

更多而不是

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse){

~~打印“你好”;~~

        if(request.msg == "login") login();
    }
);

使用

chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse){

console.log("hello");

        if(request.msg == "login") login();
    }
);

确保您已宣布

 "background":{
    "scripts":["background.js"]
  }

清单文件中的

我的最终工作版本

的的manifest.json 的

{ "name": "Demo", "version": "1.0", "manifest_version": 2, "description": "This is a demo", "browser_action":{ "default_popup":"popup.html" }, "background":{ "scripts":["background.js"] } }

的 Popup.js 的

function login(){ alert("function called"); chrome.extension.sendRequest({ msg: "login" }); } $(document).ready(function (){ console.log("Inside"); $("#openBackgroundWindow").click(login); });

的 popup.html 的

<!DOCTYPE html> <html lang="en"> <script src="jquery.js"></script>  <script src="popup.js"></script> <head> <meta charset="utf-8"> <title> Chrome Extension</title>  </head> <body id="container"> <div id="left"> <form> <div class="input-wrapper"> <input type="text" id="query" /> <button id="openBackgroundWindow">Open background window</button> </div> <input type="submit" id="button" value="Search" alt="Loading" /> </form>   <div id="results"> <ul id="results-list">  </ul> </div> </div>  </body> </html>

的 Background.js 的

function login_br(){ alert("function called"); } chrome.extension.onRequest.addListener( function(request, sender, sendResponse){ console.log("hello"); if(request.msg == "login") login_br(); } );

它与上面的代码完美配合，让我知道你是否还有问题

Answer 2

虽然Sudarshan提供自己的jQuery lib是完全正确的，但是有一种方法可以从Google的CDN加载jQuery。您必须将以下内容安全规则添加到清单文件中。


    ...
    "content_security_policy": "script-src 'self' https://*.googleapis.com; object-src 'self'",
    ...

有关详细信息，请参阅official Chrome documentation on Content Security Policy，特别是请点击此处的链接CSP specification。

background.js中的Javascript函数根本没有被使用消息传递调用。

2 个答案: