-1

Estou fazendo uma extensão do chrome que faz algumas mudanças no HTML do instagram, então no manifest.json coloquei assim:

"content_scripts": [
  {
    "matches": ["*://*.instagram.com/*"],
    "run_at": "document_idle",
    "all_frames": true,
    "js": ["contentScript.js"]
  }
],

Então o meu contentScript.js só roda na página do instagram. Mas eu queria agora fazer umas alterações apenas na página de stories, ou seja instagram.com/stories/xxxxxx.

Como faço para uma função ou arquivo só rodar em determinado subdiretório do site, enquanto outra roda no site inteiro?

O que rola é que eu tenho uma parte do código que é usada na base, e outra só nos stories.

0

1 Resposta 1

2

Separe em 2 scripts um só para o site todo e outro especifico para o stories, algo como:

"content_scripts": [
  {
    "matches": ["*://*.instagram.com/*"],
    "run_at": "document_idle",
    "all_frames": true,
    "js": ["contentScript.js"]
  }, {
    "matches": ["*://*.instagram.com/stories/*"],
    "run_at": "document_idle",
    "all_frames": true,
    "js": ["storiesScript.js"]
  }
],

Sendo contentScript.js para todas páginas *://*.instagram.com/* e sendo storiesScript.js para todas páginas *://*.instagram.com/stories*


Alternativamente você pode usar o evento popstate dentro de contentScript.js para detectar mudanças de endereço com pushState e replaceState que é comum em no instagram.com, nesse caso não irá separar os scripts, então faça algo como dentro de contentScript.js:

//Isolado escopo
(function (w, h) {
    var pushState = h.pushState,
        replaceState = h.replaceState;

    h.pushState = function (state, title, url) {
        setTimeout(detectChange, 1);

        return pushState.call(h, null, title, url);
    };

    h.replaceState = function (state, title, url) {
        setTimeout(detectChange, 1);

        return replaceState.call(h, null, title, url);
    };

    // dispara quando o script é inserido na página
    detectChange();

    // adiciona o evento popstate para quando o usuário usar back ou foward
    w.addEventListener('popstate', detectChange);

    function detectChange() {
        console.log('troca de URL');

        if (location.pathname.indexOf("/stories/") === 0) {
            // Execute algo nas páginas de stories, exemplo:
            funcoesStories();
        } else {
            // Execute algo nas outras páginas, exemplo:
            outrasFuncoes();
        }
    }
})(window, history);

E no manifest.json deve usar somente:

"content_scripts": [
  {
    "matches": ["*://*.instagram.com/*"],
    "run_at": "document_idle",
    "all_frames": true,
    "js": ["contentScript.js"]
  }
],

Usei location.pathname para pegar o PATH da URL e com .indexOf("/stories/") === 0 checa se o PATH é /stories/ ou outra página dentro dela.

Note que reescrevi o history.pushState e history.replaceState pois eles não disparam o evento popstate (detalhes em https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate)

4
  • 1
    Muitíssimo obrigado! Eu sabia que era algo simples, mas não fazia ideia de como fazer. Ajudou muito Commented 25/10/2020 às 4:30
  • Guilherme, o arquivo parece não carregar se eu abro os stories, apenas se eu copio o link e crio uma nova página (Acredito que seja algo relacionado à página não recarregar, e sim só o url mudar). Alguma ideia do que posso fazer em relação a isso? Commented 25/10/2020 às 4:58
  • @VitorCeolin atualizei a resposta;
    – Syzoth
    Commented 25/10/2020 às 5:30
  • 1
    @VitorCeolin atualizei o código, tinha esquecido que pushState e replaceState não disparam o popstate, então dessa forma provavelmente vai resolver para todas situações de navegação.
    – Syzoth
    Commented 25/10/2020 às 5:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .