Задать вопрос
JastaFly
@JastaFly
javascript

Как вызвать функцию в расширении Chrome?

Доброго всем времени суток! Реши попробовать написать расширение для Google Chrome. Написал popup:
<!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>

И решил сначала написать скрипты для него, например чтобы при клике в popupe одна картинка менялась на другую. Но функция из popup.js которая должна это сделать упорно не хочет вызываться. При этом файл скрипта подключен верно, и если в самом верху поставить alert, то он сработает. Но функции не вызываются. Плиз подскажите что не так?!?? Вот мой манифест:
{
  "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"
    }
  ]
}
  • Вопрос задан
  • 186 просмотров
6 комментариев
Подписаться 2 Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 2
grgd
@grgd
Web & js
Из-за дефолтного CSP инлайновый js в попапе не работает. Используйте addEventListener в popup.js
Moar info
Ответ написан
1 комментарий
1 комментарий
JastaFly
@JastaFly Автор вопроса
Покурив немного манульчик, я решить поставленную задачу.
Вообщем js файлы который будет работать с контентом попапа, нужно назвать popup.js и что важно подключить его перед закрывающимся тегом body
<!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>

После в данном js файле нужно найти элемент попапа, при клики (или ещё чём-то) мы хотим вызывать функцию и собственно прикрутить её к данному событию:
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);
    }
};

Спасибо всем за помощь)
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Модификация раздела "Табличные знания"
25 дек. 2024, в 20:24
1000 руб./за проект
Верстка React
25 дек. 2024, в 20:04
1000 руб./в час
Создать ТГ бота для анализа графиков
25 дек. 2024, в 18:09
10000 руб./за проект
Ещё заказы