getElementById в расширении Chrome - PullRequest
0 голосов
/ 02 июня 2018

Я написал код для расширения, но он не работает: я не могу получитьElementById ни в документе, ни во всплывающем окне расширения.Я хотел бы, когда я нажимаю всплывающее текстовое расширение запускает игру.HTML-код;

    <!DOCTYPE html>
<html>
<head> 

<style> p {color: purple;} </style>
</head>
<body>
<p id="pocinje"> Ekstenzija je pokrenuta i ceka se vrijeme za pocetak. </p>
<script src="background.js"> </script>
</body>
</html>

JAVASCRIPT;

document.getElementById("pocinje").onclick= function() {open};

function open() {
document.getElementById("startNewGame").click();

console.log("alorka");

}

Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Всплывающее окно расширения не может напрямую взаимодействовать с контентом "tab" (вашей веб-страницей).

Только вкладка "background" и "content" может взаимодействовать с "tab"содержаниеСкрипт «всплывающих окон» может только сообщать им, что в него можно добавить другой скрипт (щелчок по содержимому «вкладки»).

1 / вы должны установить связь между вашим скриптом «всплывающих окон» и однимиз этих сценариев

2 / ваше действие должно быть вставлено в содержимое "вкладки" правильным сценарием расширения


manifest.json:

Прежде всего, вы должны заявить в своем манифесте, что вы хотите взаимодействовать с содержимым вкладки:

"permissions": ["tabs", "<all_urls>"],

Во-вторых, вы должны объявить «фоновый» файл, который будет использоваться как ядроВаше расширение (все еще в манифесте), по крайней мере, для централизации связи между скриптами расширения:

"background": {
    "scripts": ["background.js"]
},

В-третьих, вы должны объявить свое «всплывающее окно» (все еще в манифесте):

"browser_action": {
    "default_popup": "popup.html"
}

Теперь вы установили свое расширение, вот основные сценарии, которые вы можете использовать:

popup.html:

Всплывающее окно вставляет всплывающее окно.js "файл, который будет связываться с" background.js ":

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="popup.js"></script>
</head>
<body>

    <a id="popupBtn">Click me</a>

</body>
</html>

popup.js :

Сценарий всплывающего окна прослушивает щелчок в содержимом всплывающего окна и при срабатывании выдает сообщение на фон:

// always waits the document to be loaded when shown
document.addEventListener('DOMContentLoaded', function() {

    // opens a communication between scripts
    var port = chrome.runtime.connect();

    // listens to the click of the button into the popup content
    document.getElementById('popupBtn').addEventListener('click', function() {

        // sends a message throw the communication port
        port.postMessage({
            'from': 'popup'
            'start': 'Y'
        });
    });
});

background.js :

Фоновый скрипт создает связь между всплывающим окном и самим себе выдает " chrome.runtime " и вставляет код всодержимое вкладки, если правильно отправлено сообщение:

// opens a communication port
chrome.runtime.onConnect.addListener(function(port) {

    // listen for every message passing throw it
    port.onMessage.addListener(function(o) {

        // if the message comes from the popup
        if (o.from && o.from === 'popup' && o.start && o.start === 'Y') {

            // inserts a script into your tab content
            chrome.tabs.executeScript(null, {

                // the script will click the button into the tab content
                code: "document.getElementById('pageBtn').click();"
            });
        }
    });
});

Более подробная информация здесь: https://developer.chrome.com/extensions/content_scripts#functionality

0 голосов
/ 02 июня 2018

В вашем коде вы используете обработчик событий onclick:

element.onclick = functionRef;

, где functionRef - это функция: имя функции, объявленной в другом месте (1), или выражение функции(2).

- MDN веб-документы

Таким образом, вы можете:

  1. Вызвать функцию с помощьюскобка после идентификатора функции:

    document.getElementById("pocinje").onclick = function() {
        open()
    };
    
  2. Или просто передать функцию непосредственно в свойство onclick:

    document.getElementById("pocinje").onclick = open
    
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...