CODEWITHSUNDEEP
javascriptonclick
Alo Balo
Alo Balo

Reputation: 81

getElementById in chrome extension

I have written a code for extension but it doesn't work: I can't getElementById in document nor in extension popup. I would like when I click popup text extension starts the game. HTML CODE;

    <!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");

}

How can I fix this?

Upvotes: 8

Views: 12273

Answers (2)

Neii
Neii

Reputation: 598

An extension popup can't directly interact with the "tab" content (your web page).

Only "background" and "content" script can interact with the "tab" content. The "popup" script can only message to them it's ok to insert another script into it (the click into the "tab" content).

1/ you must establish a communication between your "popup" script and one of these scripts

2/ your action must be inserted into the "tab" content by the right extension script

manifest.json:

First of all, you must declare into your manifest that you want to interact with the tab content:

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

Secondly, you must declare a "background" file that will be used to be the core of your extension (still in the manifest), at least to centralize the communication between the extension scripts:

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

Thirdly, you must declare your "popup" (still in the manifest):

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

Now you have set up your extension, here is the main scripts you can use:

popup.html:

The popup inserts the "popup.js" file that will communicate with the "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:

The popup script listens to a click into the popup content and will message to the background if fired:

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

The background script creates a communication between the popup and itself throw "chrome.runtime", and will insert a code into the tab content if properly messaged:

// 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();"
            });
        }
    });
});

More information here: https://developer.chrome.com/extensions/content_scripts#functionality

Upvotes: 9

Ivan
Ivan

Reputation: 40648

In your code you are using the onclick event handler:

element.onclick = functionRef;

Where functionRef is a function: the name of a function declared elsewhere (1) or a function expression (2).

- MDN web docs

So you can either:

  1. Call a function with the parenthesis after the function's identifier:

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

  2. Or just pass the function directly to the property onclick:

    document.getElementById("pocinje").onclick = open

Upvotes: 1

Related Questions