Динамическое изменение содержимого веб-страницы с расширением Firefox с использованием Javascript без Greasemonkey - PullRequest
6 голосов
/ 28 июня 2011

Я хотел бы изменить содержимое веб-страниц, чтобы поместить элемент, который изменяется в соответствии с веб-страницей.

например, я хотел бы отобразить элемент div с текстом "Вы находитесь на http://www.google.com" когда пользователь находится на веб-сайте http://www.google.com, но когда пользователь переходит на http://www.yahoo.com, div должен измениться и отображать "Вы находитесь http://www.yahoo.com".

Чтоя ищу какой-то пример для начала (я надеюсь, что не первый человек, который подумает об этом трюке).

Ответы [ 5 ]

2 голосов
/ 01 августа 2013

Вот один из способов получить что-то на странице, чтобы показать текущий URL.Это неправильный подход, но он даст некоторые видимые изменения для начала.

Эти шаги начнутся с примера hello world , упомянутого выше, и изменят его, чтобы вставить некоторый текст ввеб-страницы.

получить исходные файлы

  1. Сохранить файл с расширением локально на вашем компьютере.
  2. Переименованиефайл XPI в starter.zip
  3. Скопируйте содержимое файла starter.zip в новую папку «showUrl», чтобы вы могли редактировать файлы.
  4. Откройте browserOverlay.js в текстовом редакторе(в showUrl / content /)

вставить новый код

  1. пункт меню Инструменты |Привет, мир!|Привет, мир!вызовет этот метод:

    XULSchoolChrome.BrowserOverlay = {
        /**
         * Says 'Hello' to the user.
         */
        sayHello : function(aEvent) {
            // code starts here.
    
  2. Добавьте этот код в функцию "sayHello"

    sayHello : function(aEvent) {
        try
        {
            // gBrowser is a global value
            var document = gBrowser.contentDocument;
    
    <pre><code>    var doc_bodies = document.getElementsByTagName('body');
        var doc_body = doc_bodies[0];
    
        var first_element = doc_body.firstChild;
    
        var url_div = gBrowser.contentDocument.createElement('div');
        url_div.id = 'added-by-firefox-extension';
        url_div.innerHTML = document.URL;
    
        // add the url at the top of the document body
        doc_body.insertBefore( url_div, first_element );
        // add the url at the end of the document body
        doc_body.appendChild( url_div );
    }
    catch(e)
    {
        alert(e);
    }
    </code>
  3. сожмите содержимоеиз showUrl

  4. изменить расширение файла zip на xpi
  5. перетащить файл xpi на firefox
  6. перейти на веб-страницу
  7. открыть пункт меню Инструменты |Привет, мир!|Hello World!

Для меня главной проблемой было выяснить, как использовать gBrowser для доступа к веб-странице.

1 голос
/ 28 июня 2011

Ваш вопрос слишком широкий.Есть несколько шагов, которые нужно сделать, чтобы начать разработку расширения Firefox.Здесь достаточно документации и примеров: https://developer.mozilla.org/en/extensions

1 голос
/ 28 июня 2011

Вы должны научиться XUL XBL с привязкой ) добавлять XUL-DOM-узлы. Не следует добавлять HTML-узлы в HTML-документ. См. раздел расширений о том, как создать расширение.

1 голос
/ 28 июня 2011

Вы ищете существующее дополнение Firefox под названием Greasemonkey (очень популярное среди фанатов Java-скриптов). Он позволяет динамически изменять содержимое веб-страницы с помощью сценария Java с помощью userscripts .

Для ваших целей уже доступно множество пользовательских скриптов на http://userscripts.org/. Учитесь у них и модифицируйте их для своего использования.

0 голосов
/ 28 июня 2011

Вы можете сделать что-то вроде этого:

Начните с двух скрытых div: у первого будет условие js (например, onChange), которое будет записано с URL сайта (после загрузки js). Затем js изменяет innerHTML (или только класс, если вы используете css для отображения метки), который будет содержать значение первого div.

Все довольно просто:)

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