Google Chrome弹出式扩展程序中的Javascript未运行

Question

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

我有一个基本的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扩展，在弹出窗口中按钮似乎没有响应

这是一般的弹出窗口或我的代码特定的东西吗？

Answer 1

虽然您已经发现可以绕过内联脚本“问题”（这是一个安全功能），但如果您不这样做，下面会是这样。 这显示了如何调用通知和基于“窗口”的对话框。

的manifest.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/

Answer 2

为了安全起见，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文件创建

所以你应该编写一个类似于yourjsfile.js的js文件

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

function disp() {
document.getElementById("test").innerHTML = "Bye";
}

Google Chrome弹出式扩展程序中的Javascript未运行

问题描述

2 个解决方案

解决方案1
8 已采纳 2012-06-23 14:07:47

解决方案2
1

Google Chrome弹出式扩展程序中的Javascript未运行

问题描述

2 个解决方案

解决方案1 8 已采纳 2012-06-23 14:07:47

解决方案2 1

解决方案1
8 已采纳 2012-06-23 14:07:47

解决方案2
1