Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

133
Visualizações
iFrame gets loaded automatically whenever my chrome extension is loaded

so I am a beginner and started making a chrome extension just for fun. It's a basic extension which makes an iframe element on any page. I have added the onClick event listener in my code to trigger the iFrame whenever the extension's logo is clicked . But for some reason whenever I open a new site the iFrame loads automatically. It does load again when I press the chrome extension's icon, but I just cannot make it stop appearing whenever a new site is visited. Here is my code. Any help would be appreciated!

manifest.json

{
    "name": "Sample Extension",
    "action": {},
      "permissions": ["activeTab", "scripting","tabs","clipboardRead",
      "clipboardWrite"],
      "background": {
        "service_worker": "background.js"
      },
    "version": "1",
    "manifest_version": 3,
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["<all_urls>"],
        "all_frames": true
    }],
    "web_accessible_resources": [
        {
            "resources": [ "frame.html" ],
            "matches": ["<all_urls>"]
        }
    ]
}

contentscript.js

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;
if (!location.ancestorOrigins.contains(extensionOrigin)) {
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('frame.html');
    iframe.style.cssText = 'position:fixed;top:25px ;left:25px;display:block;' +
                           'width:calc(100% - 50px);height:calc(100vh - 50px);z-index:9999; background: none; border: none; border-radius: 10px';
    document.body.appendChild(iframe);
}

background.js

chrome.action.onClicked.addListener((tab,tabId) => {
    chrome.scripting.executeScript({
        files: ["contentscript.js"],
        target: {tabId: tab.id}
    })
  });

frame.html

<style>
html, body, iframe, h2 {
    margin: 0;
    border: 0;
    padding: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    background: none;
    color: black;
}
h2 {
    height: 50px;
    font-size: 20px;
}
iframe {
    height: 100vh;
}
</style>
<iframe src="https://www.youtube.com/"></iframe>
about 4 years ago · Santiago Trujillo
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda