There is no right-side panel in chrome extension API.
But you may do it in the same way that 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.
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