Make Chrome extension Open as Window not as Popup
Stop Chrome Extension opening as popup.
Step01: Setup "manifest.json" file
We are using 'MV2' Version its old now chrome has mv3 but in our case mv2 worked well so that's it
Code:
{
"manifest_version": 2, //Do Not Turn 3 If You Do It Show but you won't abl to click.
"name": "Open As SepWindow",
"version": "1.0",
"description": "This extension demostrate how can we open chrome extension as
seprate window and stop default_popup , and we want open popup as seprate window
so we can do smothing with it",
"browser_action": {
"default_popup": ""
},
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["*://*/*", "<all_urls>","https://*.google.com/*"],
"js": ["popup.js"]
}
],
//"permissions": ["activeTab", "nativeMessaging","tabs"]
"permissions": [
"<all_urls>"
]
}
Step02: Now Creating our HTML Stuff "popup.html"
Code:
#popup.html
<html>
<head>
<style>
body{
width:340px;
height:440px;}
h3 span{
color: rgb(255, 81, 0);
}
ul li {
font-weight: bolder;
font-size: medium;
}
</style>
</head>
<body>
<h3>Hello ,Bro This is <span>open_extension_as_win</span></h3>
<div>
<ul>
<li>When the user clicks on the browser action icon in the Chrome toolbar, a new window is opened.</li>
<li>The new window is a popup window.</li>
<li>The popup window is 600 pixels high and 400 pixels wide.</li>
<li>The popup window loads the content of the popup.html file.</li>
</ul>
</div>
</body>
<script src="popup.js"></script>
</html>
Here for demo content I am putting this to explaining our code you can put anything on body that you wanted
Step03: Let's Do Logic Stuff Content Window Ctrl "popup.js"
Create an new file name 'popup .js'
Code:
#popup.js
Leave it blank or put your logic on it because id don't want to do anything with logic on content tab area or any manipulation that why i an leaving blank here.
I am leaving on your what's on your mind do that like adding button or clock logic or just ignore like me
because our main motto is opening extension as window
Step04: Here is our Real Sword Comes "background.js"
Now we come up for our real secrets now we showing too the world what can we do now our strength and power of logic and coding math's
Just create another file name "background.js"
and put this code on it. For more you can visit chrome extension api reference.
We are using browserAction because of mv2 and onClicked Events of chrome browser api and listening the click and fired the function that has "tab"
now we are again using 'chrome.windows.create' for creating new window and opening popup.html as window mode
Code:
console.log("Jo");
chrome.browserAction.onClicked.addListener(function(tab) {
console.log("Button clicked!");
console.log(tab.id);
chrome.windows.create({
url: chrome.runtime.getURL("popup.html"),
type: "popup",
height: 600,
width: 400
});
});
// In background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.runtime.openOptionsPage();
});
Thank You
If this Post Help You Than Please Share it and Follow us for more😉😎😎😎😊😊😊See You!!!!!
Put Your Thought or Query Here