3

嗨，我遇到了一个非常奇怪的问题。

我有一个基本的 chrome 扩展，它有一个默认的 popup.html 文档，定义如下：

<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>

对话框.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

manifest_version 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 文件创建

所以你应该写一个 js 文件，如下所示yourjsfile.js

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

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