Chrome 용 StumbleUpon과 유사한 도구 모음 만들기

어떻게해야합니까? 나는 설명서를 읽었지 만 나는 단지 have icon, a tooltip, a badge, and a popup 만 찾을 수 있습니다. StumbleUpon과 유사한 툴바로 만들고 싶습니다. 그럼 ContentScripts를 사용하는 방법에 대해 생각하지만 주입에 html을 추가 해야할지 모르겠다 to the documentation 난 단지 js 또는 CSS의 옵션을 가지고 있기 때문에. 내가 여기서 무엇을 놓치고 있니?Chrome 용 StumbleUpon과 유사한 도구 모음 만들기

$("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>

막대가 표시하지만 "안녕하세요"아니다

은 내가 JS 파일이 어디에서 봐야 할 곳 =/

출처

2011-08-11 Tsundoku

음, y ou는 div의 src을 설정하고 해당 URL을 본문에로드 할 것으로 기대할 수 없습니다. 어쩌면 iframe이 더 나은 옵션일까요?

div로 이동하려면 배경 페이지 내에 XMLHttpRequest을 사용하여 popup.html 콘텐츠를로드 한 다음 해당 html을 콘텐츠 스크립트에 전달하고 페이지에 삽입해야합니다 (팝업에는 body이 없어야 함). 태그). div의 또 다른 단점은 부모 사이트의 스타일이 너의 것에 방해가되면 목에 통증이 생길 수 있다는 것입니다.

추신. 또한 <body> 위에 주사하지 마십시오. 그것의

출처

2011-08-11 14:58:14 serg

iframe이 분명히 방법입니다. 그렇지 않으면 영향을주지 않고 툴바를 삽입하는 페이지의 CSS에 영향을받지 않고 툴바를 스타일링하는 끔찍한 시간을 보게 될 것입니다. –

매우 기본은

같은 jQuery를 뭔가를 사용하는 간단한 가정으로,

그래서, 당신은 HTML 요소를 생성하고 페이지에 그들을 주입 JS 스크립트를 주입 할 필요가있다

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

출처

2011-08-12 06:18:55 Hailwood

StumbleUpon과 유사한 툴바를 만들기 위해 사용할 수있는 실험용 Infobar API가 있습니다. 설명서 및 예제는 Infobars을 참조하십시오.

API가 안정화 될 때까지 Chrome 웹 스토어에 확장 프로그램을 게시 할 수 없습니다.

출처

2011-08-17 23:02:09

Chrome 용 StumbleUpon과 유사한 도구 모음 만들기

답변

관련 문제