3

こんにちは私は非常に奇妙な問題に遭遇しました。

次のように定義されたデフォルトのpopup.htmlドキュメントを持つ基本的なChrome拡張機能があります。

<html>

<head>
  <script type="text/javascript">
    function disp() {
    document.getElementById("test").innerHTML = "Bye";
    }
  </script>
</head>

<body>

<p id="test">Hello</p>
<button type="button" onclick="disp()">'Twas Nice to meet you</button>

</body>

</html>

ブラウザでhtmlファイルを個別に実行すると、期待どおりに動作します。ボタンをクリックすると、pタグのテキストが変更されます。ただし、Chrome拡張機能を使用すると、ポップアップでボタンが応答しないように見えます

これは一般的なポップアップと関係がありますか、それとも私のコードに固有の何かですか？

4

2 に答える 2

8

インラインスクリプトの「問題」（これはセキュリティ機能です）を回避できることがわかりましたが、これを行わなかった場合は次のようになります。これは、通知を呼び出す方法と「ウィンドウ」ベースのダイアログの両方を示しています。

マニフェスト.json

{
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "notifications",
    "create",
    "tabs"
  ]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started with Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }
      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }
    </style>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div style="text-align: center;">
        <button type="button" id="click">Show Notification</button>
        <button type="button" id="dialog">Show Dialog</button>
    </div>
  </body>
</html>

dialog.html

<!doctype html>
<html>
  <head>
    <title>Dialog Prompt - Chrome</title>
    <style>
    body {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      background: white;
    }
    p {
        text-align: center;
        padding: 20px;
    }
    </style>
  </head>
  <body>
    <p>This is a dialog prompt.</p>
  </body>
</html>

popup.js

var notifier,
    dialog;

function showNotify() {
    var notify;

    if (window.webkitNotifications.checkPermission() == 0) {
        notify = window.webkitNotifications.createNotification(
            "",
            'Notification Test',
            'This is a test of the Chrome Notification System. This is only a test.'
        );
        notify.show();
    } else {
        window.webkitNotifications.requestPermission();
    }
}    
function showDialog(){
    chrome.windows.create({
        url: 'dialog.html',
        width: 200,
        height: 120,
        type: 'popup'
    });
}    
function init() {
    clicker = document.querySelector('#click');
    dialog = document.querySelector('#dialog');

    clicker.addEventListener('click', showNotify, false);
    dialog.addEventListener('click', showDialog, false);
}    
document.addEventListener('DOMContentLoaded', init);

ここからダウンロードするファイルを見つけることができます：

http://jfcoder.com/projects/chrometestdialogs/

于 2012-06-23T14:07:47.677 に答える
1

マニフェストバージョン2では、セキュリティ上の理由から、ユーザーがhtmlファイル内に関数を入力することはできません。すべての関数を別のファイルに書き込んで、以下のようにそのhtmlファイルにインポートする必要がある場合です。

<head>
  <script src="yourjsfile.js"></script> //All our functions are defined here
  <script src="jquery.js"></script>  // This is the jquery
</head>

ここでは、onclick、onkeydown、onkeyupなどの関数呼び出しは許可されていません。

    <body>
    <p id="test">Hello</p>
    <button type="button" id="btn">Twas Nice to meet you</button>
    </body>

上記では「onclick="disp（）」は許可されておらず、IDを割り当てる必要があります

したがって、イベントを作成する必要があり、定義は.jsファイルから作成する必要があります

したがって、 yourjsfile.jsの下のようなjsファイルを作成する必要があります

document.addEventListener('DOMContentLoaded', function () {
$("#btn").on("click",function(){
 disp();
});
});

function disp() {
document.getElementById("test").innerHTML = "Bye";
}
于 2014-09-02T04:58:33.387 に答える