Создание подобной StumbleUpon панели инструментов для Chrome - PullRequest
Новая
       6

Создание подобной StumbleUpon панели инструментов для Chrome

0 голосов
/ 11 августа 2011

Как мне это сделать? Я прочитал документацию, но обнаружил, что у меня есть только значок, всплывающая подсказка, значок и всплывающее окно . И я хочу сделать его похожим на StumbleUpon. Затем я подумал об использовании ContentScripts, но я не знаю, куда добавить html для внедрения, потому что согласно документации у меня есть только опции js или css. Что мне здесь не хватает?

У меня есть файл js: 

$("body").before('<div name="extension-top" id="extension-top"></div>');
var top = document.getElementById("extension-top");
document.getElementsByTagName('body')[0].style.marginTop = '40px';
top.src = chrome.extension.getURL("popup.html");

и css: 

#extension-top { width:100%; height:40px; top:0; left:0; background:#000;margin:0;padding:0;}

наконец, HTML: 

<body id="extension-content">
    HELLO
</body>

Появляется панель, но "привет" нигде не видно = /

Ответы [ 3 ]

1 голос
/ 12 августа 2011

Основа этого заключается в том, что вам нужно внедрить js-скрипт, который создает элементы html и внедряет их в страницу,

так, с простым предположением, что вы используете jQuery что-то вроде

var toolbar = $('<div id="toolbar">My Toolbar</div>').prependTo('body');

1 голос
/ 18 августа 2011

Существует экспериментальный API Infobar, который вы можете использовать для создания панели инструментов, подобной StumbleUpon.См. Infobars для документации и примеров.

Обратите внимание, что вы не сможете опубликовать расширение в Chrome Web Store, пока API не станет стабильным.

1 голос
/ 11 августа 2011

Ну, вы не можете просто установить src элемента div и ожидать, что он загрузит этот URL в свое тело.Может быть, iframe будет лучшим вариантом?

Если вы хотите использовать div, вам нужно будет загрузить контент popup.html, используя XMLHttpRequest, внутри фоновой страницы, затем передать этот html в скрипт контента и вставить его на страницу (popup mustn 'не имеет никаких тегов body).Другим недостатком div является то, что его стилизация - это боль в шее, так как стили родительского сайта будут мешать вашему.

PS.Кроме того, вы не должны вводить его выше <body>.

...