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

Question

Hi I have run into a very weird problem. 嗨，我遇到了一个非常奇怪的问题。

I have a basic chrome extension which has a default popup.html document defined as follows: 我有一个基本的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>

Upon running the html file independently in a browser, it behaves as expected: clicking on the button changes the text of the p tag. 在浏览器中独立运行html文件时，它的行为与预期一致：单击按钮可更改p标记的文本。 However, from withing the chrome extension, in the popup the button does not seem to respond 但是，通过使用chrome扩展，在弹出窗口中按钮似乎没有响应

Is this something to do with popups in general or something specific to my code? 这是一般的弹出窗口或我的代码特定的东西吗？

Answer 1

Although you've found out you can circumvent the inline script "issue" (it is a security feature), below is what it would look like if you did not do that. 虽然您已经发现可以绕过内联脚本“问题”（这是一个安全功能），但如果您不这样做，下面会是这样。 This shows both how to call a notification and a "window"-based dialog. 这显示了如何调用通知和基于“窗口”的对话框。

manifest.json 的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 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 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 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);

You can find the files to download here: 您可以在此处找到要下载的文件：

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

Answer 2

manifest_version 2 doesn't allow user to enter the function inside the html file for security purpose, should we need to write all the function in separate file and import it to that html file like below 为了安全起见，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>

and the function calling are not allowed here like onclick, onkeydown,onkeyup, etc... 并且这里不允许调用函数，如onclick，onkeydown，onkeyup等...

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

In above "onclick="disp()" not allowed, and should assign a id 在上面“onclick =”disp（）“不允许，并且应该分配一个id

so should we need to create the event and definition must create from the .js file 所以我们需要创建事件，定义必须从.js文件创建

So you should write a js file like below yourjsfile.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