How to call a function in a Chrome extension?

J

JastaFly2020-06-27 22:17:33

JavaScript

JastaFly, 2020-06-27 22:17:33

Good day to all! Decide to try writing an extension for Google Chrome. popup wrote:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/style.css">
    <script src="/js/popup.js"></script>
</head>
<body>
<header>
    <div class="logo">
        <div class="logo__img">
           
        </div>
        <p class="logo__text">Ad Scout</p>
    </div>
    <div id="on" class="on" onclick="hov_on(this)">
        <div class="on__img">
            <img src="./img/fire-black.svg" alt="">
        </div>
        <p class="on__text">Run</p>
    </div>
</header>
</body>
</html>

And I decided to first write scripts for it, for example, so that when you click in popupe, one picture changes to another. But the popup.js function that should do this stubbornly refuses to be called. At the same time, the script file is connected correctly, and if you put alert at the very top, it will work. But the functions are not called. Plz tell me what's wrong?!?? Here is my manifest:

{
  "name": "",
  "description": "",
  "version": "1.0",
  "manifest_version": 2,
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "browser_action": {
    "default_title": "",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [ "https://yandex.ru/*", "https://www.google.ru/*" ],
      "js": [ "script.js" ],
      "run_at":"document_end"
    }
  ]
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

G

Grigory Kutarev, 2020-06-28
@grgd

Due to the default CSP, inline js does not work in the popup. Use addEventListener in popup.js
Moar info

J

JastaFly, 2020-07-13
@JastaFly

Having smoked a little manulchik , I solve the problem.
In general, js files that will work with popup content should be called popup.js and it is important to include it before the closing body tag

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Ads Scout</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
    <div class="logo">
        <div class="logo__img">
           
        </div>
        <p class="logo__text">Ad Scout</p>
    </div>
    <div  id="on" class="on">
        <div class="on__img">
            <img on="0" src="./img/fire-black.svg" alt="">
        </div>
        <p class="on__text">Зажигаем?</p>
    </div>
</header>
<script src="/js/popup.js"></script>
</body>
</html>

After that, in this js file, you need to find the popup element, when you click (or something else), we want to call the function and actually attach it to this event:

let on = document.getElementsByClassName('on')[0];

on.onclick = function(element) {
    let img = on.children[0].children[0];
    let work = img.getAttribute('on');
    if (work == 0) {
        img.src = './img/fire-hov.svg';
        img.setAttribute('on', 1);
    }
    else {
        img.src = './img/fire-black.svg';
        img.setAttribute('on', 0);
    }
};

Thank you all for your help)