Chrome Extension Dev: изменение DOM с помощью jQuery - PullRequest
18 голосов
/ 05 ноября 2011

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

My _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, но он не работает.Я остановился на вызове скрипта в файле background.html при отладке и событии executeScript, но моя точка останова файла content.js не была достигнута.Я думал, что наличия файла content.js в папке «content_scripts» в моем файле manifest.json было достаточно, но если я удаляю свой файл background.html, ничего не происходит.

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

SO исследованных статей

Ответы [ 2 ]

26 голосов
/ 05 ноября 2011

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

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

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

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

с фоновой страницы и вставьте jquery в качестве скрипта содержимого либо через манифест:

"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"});
    });
});
1 голос
/ 05 ноября 2011

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

Существует два параметра, которые можно использовать для внедрения jQuery:

1) Укажите в manifest.json для автоматической вставки jQuery и вашего скрипта контента:

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

или

2) Вставить jQuery через background.html :

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...