Chrome Extension Dev: изменение DOM с помощью jQuery

OK. Поэтому я прочитал содержание сценариев и т.п., В том числе несколько других статей SO, которые я добавлю ниже, но это все еще не работает!

Мой _manifest.json_:

{
    "name": "name",
    "version": "1.0",
    "description": "desc",
    "browser_action": { "default_icon": "icon.png" },
    "permissions": [ "tabs", "http://*/*" ],
    "background_page": "background.html",
    "content_scripts": [ {
        "all_frames": true,
        "js": [ "content.js" ],
        "matches": [ "http://*/*", "https://*/*" ] 
    } ]
}

Мой _background.html_:

<!doctype html>
<html>
  <head>
    <title>Background Page</title>    
    <script src="jquery.min.js"></script>    
    <script src="content.js"></script>
  </head>
  <body>
    <script>
        chrome.browserAction.onClicked.addListener(function(tab) 
        {
            chrome.tabs.executeScript(null, {file:"content.js"});
        });
    </script>
  </body>
</html>

Мой _content.js_:

$('body').prepend('<h1>Testing!</h1>');
$('body').css('background', '#f00 !important');

В настоящее время я просто пытаюсь изменить цвет фона тела вкладки. Я добавил прослушиватель кликов для запуска моего файла background.html, но он не работает. Я остановился на вызове script в файле background.html при отладке и событии executeScript, но моя точка доступа к content.js не попала. Я думал, что файл content.js под "content_scripts" в моем файле manifest.json был достаточно, но если я удалю файл background.html, ничего не произойдет.

Может ли кто-нибудь помочь мне каким-либо образом изменить содержимое вкладки? Мне кажется, что я что-то упускаю, потому что чувствую, что делаю это сложнее, чем это. Если есть более простой способ, чем то, что я пытаюсь сделать, я открыт для любых предложений/лучших практик.

SO Исследованные статьи

Ответ 1

Фоновая страница похожа на ваш собственный мини-сервер - это полностью изолированная страница, которая не имеет никакого отношения к страницам, которые посещает пользователь. Он используется для управления остальными компонентами расширения, поскольку он всегда работает в фоновом режиме.

Скрипты содержимого - это фрагменты кода javascript, которые вводятся в фактические страницы, которые посещает пользователь, и могут получать и изменять DOM родительской страницы.

Итак, чтобы получить работу с расширением, вам нужно удалить

<script src="jquery.min.js"></script>    
<script src="content.js"></script>

на исходной странице и введите jquery как содержимое script через манифест:

"content_scripts": [ {
        "all_frames": true,
        "js": [ "jquery.min.js" ],
        "matches": [ "http://*/*", "https://*/*" ] 
} ]

или с помощью chrome.tabs.executeScript:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
        chrome.tabs.executeScript(null, {file:"content.js"});
    });
});

Ответ 2

content.js пытается использовать jQuery, но вы не ввели jQuery на вкладку вместе с вашим контентом script. Ошибка в консоли: "Не указано ReferenceError: $не определено".

Есть два варианта, которые вы могли бы использовать для ввода jQuery:

1) Укажите manifest.json, чтобы автоматически вводить jQuery и ваш контент script:

"js": [ "jquery.min.js", "content.js" ],

или,

2) Inject jQuery через background.html:

chrome.tabs.executeScript(null, {file:"jquery.min.js"}, function() {
    chrome.tabs.executeScript(null, {file:"content.js"});
});

Затем будет нажата кнопка действия вашего браузера.