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>