Odnośnik Chrome rozszerzenie

pytanie zadane 2 kwietnia 2019 w HTML i CSS przez Steady Obywatel (1,140 p.)

Hejka,

Aktualnie tworze dla siebie wtyczkę do przeglądarki Chrome.

Napisałem dzisiaj skrypt JS który pobiera informacje w czasie rzeczywistym z innej strony i wyświetla ją na mojej wtyczce.

Tylko jest jeden problem. Gdy włączam html w przeglądarce jako strona wszystko działa bardzo dobrze ale gdy Załaduje Rozszerzenie to wyglada tak jakby skryptu nie było. Jest cały HTML i CSS ale bez JS.

Czy ktoś mi może wytłumaczyć jak to naprawić?

komentarz 2 kwietnia 2019 przez adrian17 Ekspert (344,860 p.)

To niestety bardzo mało mówi. Pokażesz cokolwiek konkretnego o wtyczce, stronie, zachowaniu, kodzie?

komentarz 2 kwietnia 2019 przez Steady Obywatel (1,140 p.)
edycja 2 kwietnia 2019 przez Steady

$(function(){

	$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?client_id=XXX').done(function(data){
    console.log(data);
    
    if(data.stream===null){
      $('#fccStatus').html('Offline');
    }
    else {
      $('#fccStatus').html('Online');
    }
  });
    
    
    
});

Dałem XXX za moj client ID bo w sumie nie wiem czy moge to udostepniac ale w kodzie normalnie go mam

W HTML w sumie to wystarczy, ze pokaże ten kawałem kodu:

<div class="status">
              <a href="https://www.twitch.tv/freecodecamp" target="_blank">
              <h3 id="fccStatus"></h3>
             </a>
            </div>

<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script  src="js/index.js"></script>
</body>

Jeśli chodzi HTML odpalony na stronie to mam odsyłacz do https://www.twitch.tv/freecodecamp o nazwie "Offline", który działa.

Na wtyczce po prostu jest tak jakby pusta strona. Nie ma ani odsyłacza ani samego napisu

1 odpowiedź

odpowiedź 2 kwietnia 2019 przez Chess Szeryf (76,710 p.)

{
	"manifest_version" : 2,
	"name" : "Form Data",
	"description" : "Looks at some form data.",
	"version" : "0.9",
	
	"content_scripts": [
	{
		"matches" : ["<all_urls>"],
		"js" : ["tt.js"],
		"run_at" : "document_end"
	}],
}

Powyżej - manifest.json.

(function() {
var requestURL = 'https://reqres.in/api/users/2';
var request;

request = new XMLHttpRequest();
request.onreadystatechange = alertContents;
request.open('GET', requestURL);
request.responseType = 'json';
request.send(null);

function alertContents() {
	if(request.readyState === XMLHttpRequest.DONE) {
		if(request.status === 200) {
			var superHeroes = request.response;
			let div = document.createElement('div');
			div.style.position = 'absolute';
			div.style.backgroundColor = 'olive';
			div.style.fontSize = '5em';
			div.style.width = document.body.clientWidth - (document.body.clientWidth-document.body.offsetWidth)+'px';
			div.style.left = '0px';
			div.style.top = '50px';
			div.style.zIndex = 9999;
			div.textContent = superHeroes.data.id;
			document.body.appendChild(div);	
		} else {
			console.log('Problem.');
		}

	}
}
})();

tt.js

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

Odpytałem te API:

https://reqres.in/api/users/2