Javascript в Google Chrome popup расширение не работает

Привет, я столкнулся с очень странной проблемой.

У меня есть базовое расширение chrome, которое имеет всплывающее окно по умолчанию.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, во всплывающем окне кнопка, кажется, не отвечает

Это как-то связано с всплывающими окнами в целом или что-то конкретное в моем коде?

2 3
javascript google-chrome google-chrome-extension

2 ответа:

Хотя вы обнаружили, что можете обойти встроенный скрипт "проблема" (это функция безопасности), ниже показано, как бы это выглядело, если бы вы этого не делали. Это показывает, как вызвать уведомление и диалоговое окно на основе"окна".

Манифест.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"
  ]
}

Всплывающее окно.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>

Всплывающее окно.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/

8

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()" не позволено, а должно назначение идентификатора

Поэтому нам нужно создать событие и определение должно создаваться из самого .JS файл

Поэтому вы должны написать файл js, как показано ниже Ваш файл.js

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

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