Menu
I have been learning to create a chrome extension. I have tried hello world example and it was working fine. Now I have been trying to add custom code and make some changes in the hello world code according to my requirements.
What I am trying to create is when the user clicks on the icon in the address bar, it should open popup.html below address bar as shown in the picture. The screenshot is from extension called raindrop.io
They are doing is within chrome extension. When I click on the icon it opens the right drawer on top of the existing webpage and below the address bar to show all my saved bookmarks. I wanted to achieve the same effect but I don't know where to start. I have heard that there was some experimental side pane but google has removed it.
EDIT
I have taken the suggestions and tried to implement that. Now I am stuck at two places -
Here is my code for -
A. Side Window Interface in Chrome Extension
manifest.json
{
"manifest_version": 2,
"name": "Hello World",
"description": "This extension to test html injection",
"version": "1.0",
"content_scripts": [{
"run_at": "document_end",
"matches": [
"https://*/*",
"http://*/*"
],
"js": ["js/jquery-1.11.3.js", "js/content-script.js"],
"css": ["css/custom.css"]
}],
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
]
}
Content Script.js
var iframe = document.createElement('iframe');
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "360px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none";
document.body.appendChild(iframe);
B. Note Taking App Extension
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SideNotes</title>
<link rel="stylesheet" href="css/style.css">
<script src="popup.js"></script>
</head>
<body>
<div class="container">
<div id="toolbar">
<p id="title">S I D E N O T E S </p>
<img id="logo" src="image/icon.png" alt="">
</div>
<div id="all-notes">
<ul id="todo-items"></ul>
</div>
<div id="take-note">
<form id="new-todo-form" method="POST" action="#">
<textarea id="new-todo"></textarea>
<input type="image" src="image/done.svg" id="submitButton">
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="js/db.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Screenshot of my app, it works locally
545
As mentioned, you can find the Side Panel by tapping the icon located between your profile photo and the Extension Manager at the top right of the Google Chrome window. Once you find it, simply click the Side Panel icon to open it up.
Open Google Chrome. Type chrome://flags/#side-panel into the address bar, and hit the Enter key. Now, select Enabled to the right of the Side Panel parameter. Relaunch the Chrome browser when prompted.
The Side Panel is essentially a combination of the “Other Bookmarks” folder and the Reading List. There is a tab for each one inside the sidebar. The icon lives next to your profile icon in the top-right corner of the Chrome browser.
There is no right-side panel in chrome extension API.
But you may do it in the same way that your example extension does:
background.js listening messages from the tabbackground.js if the tab is injectable (if you need your extension work correct on system pages)chrome.tabs.executeScript inject your menu div to the page / inject listener, which opens your menu.background.js listening browser icon clicks and notify your content script about clicks.popup.html in default popup.manifest.js
.... "browser_action": { }, "background": { "scripts":["background.js"] }, ... background.js
chrome.browserAction.onClicked.addListener(function(tab){ chrome.tabs.sendMessage(tab.id,"toggle"); }); zero width on with display:none; style). I use zero width because of you may want to animate your menu display by jquery as example extension does.background.js script.content-script.js
chrome.runtime.onMessage.addListener(function(msg, sender){ if(msg == "toggle"){ toggle(); } }); var iframe = document.createElement('iframe'); iframe.style.background = "green"; iframe.style.height = "100%"; iframe.style.width = "0px"; iframe.style.position = "fixed"; iframe.style.top = "0px"; iframe.style.right = "0px"; iframe.style.zIndex = "9000000000000000000"; iframe.frameBorder = "none"; iframe.src = chrome.extension.getURL("popup.html") document.body.appendChild(iframe); function toggle(){ if(iframe.style.width == "0px"){ iframe.style.width="400px"; } else{ iframe.style.width="0px"; } } manifest.json
"web_accessible_resources": ["popup.html"] The same side panel example with "manifest_version": 3, as version 2 is deprecated.
manifest.json (change EXTENTION-KEY):
{ ... "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "action": {}, "content_scripts": [ { "matches": [ "https://*/*", "http://*/*" ], "js": ["side-panel.js"] } ], "web_accessible_resources": [ { "resources": ["popup.html" ], "matches": ["https://*/*", "http://*/*"], "extension_ids": ["<EXTENTION-KEY>"] } ] } background.js:
chrome.action.onClicked.addListener(tab => { chrome.tabs.sendMessage(tab.id,"toggle"); console.log('message sent'); }); side-panel.js:
console.log("side-panel script loaded"); chrome.runtime.onMessage.addListener(function(msg, sender){ if(msg == "toggle"){ console.log("message received"); toggle(); } }) var iframe = document.createElement('iframe'); iframe.style.background = "green"; iframe.style.height = "100%"; iframe.style.width = "0px"; iframe.style.position = "fixed"; iframe.style.top = "0px"; iframe.style.right = "0px"; iframe.style.zIndex = "9000000000000000000"; iframe.style.border = "0px"; iframe.src = chrome.runtime.getURL("popup.html") document.body.appendChild(iframe); function toggle(){ if(iframe.style.width == "0px"){ iframe.style.width="400px"; } else{ iframe.style.width="0px"; } } popup.html:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="popup.css"> </head> <body> Content </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
