Сценарий с расширением Chrome не может получить доступ к фреймам - PullRequest
Новая
       20

Сценарий с расширением Chrome не может получить доступ к фреймам

0 голосов
/ 10 марта 2012

Я хочу сделать расширение Chrome на Google Reader, и я обнаружил проблему. Контент скрипта не может получить доступ к фреймам. Для всех n window.frames [n] = не определено. И у меня есть это "all_frames": правда в manifest.json. Или кто-то может сказать мне, как добавить кнопку под каждой статьей. Спасибо!

1 Ответ

1 голос
/ 10 марта 2012

После быстрого просмотра отображаемого HTML в Google Reader, единственная кнопка в IFRAME выглядит как кнопка Google Plus +1 - все остальные кнопки не находятся в IFRAME.Поэтому вам не нужно беспокоиться об IFRAME.

Я предполагаю, что существующие кнопки - это кнопки, которые появляются под каждой статьей: +1, Поделиться, Электронная почта, Сохранить непрочитанные, Добавить теги.

Если вы хотите добавить новую кнопку к существующим кнопкам статьи, все, что вам нужно сделать, - это перечислить DOM - в частности, DIV-классы "entry-actions" и добавить новый SPAN со своим элементом / кнопкой к каждой статье..

Я подозреваю (но не уверен), что Reader может динамически обновлять DOM новыми статьями.В этом случае вам может понадобиться отслеживать новые статьи, добавляемые в DOM, чтобы вы могли снова добавить свою кнопку.Для этого добавьте прослушиватель событий для DOMNodeInserted - например, 

document.addEventListener('DOMNodeInserted', onNodeInserted, false);

ОБНОВЛЕНИЕ:

Причина, по которой вы не видите класс ".entry-actions", заключается в том, что он добавляется динамически.

Вот рабочий очень простой пример.Это будет следить за DOM, и когда он увидит DIV для действий входа, у которого нет нашей кнопки «.myclass» SPAN, добавит его.

Вам нужно включить jquery в ваше расширение, чтобы это работало,Я использовал jquery-1.7.1.min.js в этом примере.Вам также понадобится файл значков с именем foo.png, если вы вырезаете и вставляете пример.

manifest.json 

{
  // Required
  "name": "Foo Extension",
  "version": "0.0.1",

  // Recommended
  "description": "A plain text description",
  "icons": { "48": "foo.png" },
  //"default_locale": "en",

  // Pick one (or none)
  "browser_action": {
    "default_icon": "Foo.png", // optional
    "default_title": "Foo Extension"      // optional; shown in tooltip
    },

  "permissions": [ "http://*/", "https://*/", "tabs" ],

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery-1.7.1.min.js", "content_script.js" ],
      "run_at": "document_idle"
    }
    ]
}

content_script.js 

var timer;

document.addEventListener('DOMNodeInserted', onNodeInserted, false);

function onNodeInserted(e)
{
    if(timer) clearTimeout(timer);
    timer = setTimeout("addButtons()", 250);
}

function addButtons()
{
    console.log('add buttons');
    var $actions = $(".entry-actions").filter(function() {
        return $(this).find('.myclass').length === 0;
    });
    $actions.append('<span class="myclass"><a href="javascript:alert(\'hey! Im a foo extension injected button!\');return false;">My button</a></span>');
}
...