1

这是我的 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();
}

这是我的背景.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 函数。可能是什么问题？

4

2 回答 2

1

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


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

有关更多信息，请阅读有关内容安全策略的官方 Chrome 文档，尤其是点击CSP 规范的链接。

于 2012-11-19T07:42:40.887 回答
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"]
  }

在您的清单文件中

我的最终工作版本

清单.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="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>

背景.js

function login_br(){

alert("function called");
}


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

它与上面的代码完美配合，如果您还有问题，请告诉我

于 2012-11-18T03:01:57.957 回答