# How can I change the content of a sidebar from a background script?

**URL:** <https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788>\
**Category:** Development\
**Created:** [February 19, 2018, 11:13pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788 "2018-02-19T23:13:45Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![andreip](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/andreip/32/24181_2.png) [@andreip](https://discourse.mozilla.org/u/andreip)\
**Post date:** [February 19, 2018, 11:13pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/1 "2018-02-19T23:13:45Z")

</div>

I’m trying to update the content of a sidebar but I cannot set it’s content from a background script. How can I do this? Is this possible?

Thank you

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [February 20, 2018, 8:36am UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/2 "2018-02-20T08:36:14Z")

</div>

> **[sidebarAction.setPanel() - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction/setPanel)**
>
> Sets the sidebar's panel: that is, the HTML document that defines the content of this sidebar.

---

<div class="post-metadata">

**Author:** ![andreip](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/andreip/32/24181_2.png) [@andreip](https://discourse.mozilla.org/u/andreip)\
**Post date:** [February 20, 2018, 9:55am UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/3 "2018-02-20T09:55:35Z")

</div>

Aaaaa… I misunderstood the API. I thought that I can only set an existing hardcoded file but I can set any dom element I want in the setPanel fucntion, right? Will try that when I will get home. Thank you again for your help @freaktechnik 🙂

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [February 20, 2018, 9:56am UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/4 "2018-02-20T09:56:28Z")

</div>

I think you can also use blob and data URIs, yes. Else you’ll have to use a blank html file of your extension with a script that inserts whatever you want.

---

<div class="post-metadata">

**Author:** ![andreip](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/andreip/32/24181_2.png) [@andreip](https://discourse.mozilla.org/u/andreip)\
**Post date:** [February 20, 2018, 6:07pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/5 "2018-02-20T18:07:07Z")

</div>

```
 browser.sidebarAction.setPanel({panel: 'data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val'});

```

I get this ☹

```
Error: Access denied for URL data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val
```

---

<div class="post-metadata">

**Author:** ![andreip](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/andreip/32/24181_2.png) [@andreip](https://discourse.mozilla.org/u/andreip)\
**Post date:** [February 20, 2018, 6:12pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/6 "2018-02-20T18:12:28Z")

</div>

also… background js

```
    browser.runtime.sendMessage({"url": 'value'});

```

sidebar.html

```
 <script>
   function handleMessage(request, sender, sendResponse) {
     document.getElementById("myElement").innerHTML = 'test';
   }

   browser.runtime.onMessage.addListener(handleMessage);

 </script>
  </head>

   <body>
 <div id="myElement">This is an awesome certificate info!</div>

```

Error: Could not establish connection. Receiving end does not exist.

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [February 20, 2018, 6:14pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/7 "2018-02-20T18:14:55Z")

</div>

That should definitely work. Though I’d suggest doing communication the other way around and sending a response from the background script.

---

<div class="post-metadata">

**Author:** ![andreip](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/andreip/32/24181_2.png) [@andreip](https://discourse.mozilla.org/u/andreip)\
**Post date:** [February 20, 2018, 7:47pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/8 "2018-02-20T19:47:57Z")

</div>

I have a context menu that triggers this… the context menu item and listeners are in the background script.

---

<div class="post-metadata">

**Author:** ![andreip](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/andreip/32/24181_2.png) [@andreip](https://discourse.mozilla.org/u/andreip)\
**Post date:** [February 20, 2018, 11:39pm UTC](https://discourse.mozilla.org/t/how-can-i-change-the-content-of-a-sidebar-from-a-background-script/25788/9 "2018-02-20T23:39:53Z")

</div>

I made my addon public! Uuuhuuu! Still uses an ugly alert as an UI. If you have a better proposal I’m all ears 😃

> **[Certificate Viewer for Humans – Obține această extensie pentru 🦊 Firefox (ro)](https://addons.mozilla.org/ro/firefox/addon/certificate-viewer-for-humans/?src=api)**
>
> Descarcă Certificate Viewer for Humans pentru Firefox. Computers can read PEM encoded certificates. Hummans cannot. This extension might help. Try out on this page