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();
}

これは私の 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 関数も呼び出されていません。何が問題になる可能性がありますか?

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>

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();
    }
);

上記のコードで完全に機能しました。まだ問題がある場合はお知らせください

于 2012-11-18T03:01:57.957 に答える