How to make side panel in chrome extension?
There is no right-side panel in chrome extension API.
By you may do it in the same way, as your example extension does:
- Create
background.js
listening messages from the tab - Create a content script sends the message to
background.js
if the tab is injectable (if you need your extension work correct on system pages) - If tab is injectable, with
chrome.tabs.executeScript
inject your menu div to the page / inject listener, which opens your menu. - Profit.
More details about how to do it below.
- Create
background.js
listening browser icon clicks and notify your content script about clicks. - Prevent showing of
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");});
- In content-script.js create an invisible iframe, with your popup.html (with
zero width
on withdisplay:none;
style). I usezero width
because of you may want to animate your menu display by jquery as example extension does. - In content-script add message listener for receive messages sent from
background.js
script. - When receiving the message, show or hide menu block
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"; }}
- Make popup.html and scripts you load from extension context visible for browser HTML context:
manifest.json
"web_accessible_resources": ["popup.html"]
Read more
- Chrome Tabs API:https://developer.chrome.com/extensions/tabs
- Chrome message passing: https://developer.chrome.com/extensions/messaging
- Browser action click processing: https://developer.chrome.com/extensions/browserAction#event-onClicked
- Content script injection: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript