Engaging with the crossrider sidepanel extension

Question

Engaging with the crossrider sidepanel extension

When it comes to the crossrider sidepanel, I prefer using an iframe over js-injected html to avoid interference with the rest of the page. However, I am struggling to establish any interaction between my browser extension and the iframe.

I believe adding a sidepanel with an extension is pointless unless there can be some basic JS communication involved. My goal is to incorporate options like checkboxes in the iframe that can control the extension. Since the plugin exists, I assume there must be a way to achieve this.

My ideal scenario would involve handling basic input in the child iframe and sending save/load commands back to the extension. Is message passing the answer here? And if so, which API should I use for this purpose?

I found a related query on Stack Overflow: Accessing iframe from chrome extension

[EDIT]
After trying out a few approaches...

It appears that the expected practice is to host the iframe's HTML content externally. This seems odd as it should ideally be available locally within the extension. Hosting externally becomes inconvenient when you need to view pages offline. I find this unnecessary and have decided to disregard it as an option.
Another method I tested was providing the HTML directly for the sidebar without placing it inside an iframe. I personally prefer iframes because they keep CSS and JS separate, minimizing interference between the page and the extension.

So, I attempted creating an iframe through the `html` sidebar attribute with an ID, and injected the content after a 100ms delay using `myiframe.contentWindow.document.open/writeln/close()`. While this works well in Chrome, it fails in Firefox due to a security error (`The operation is insecure` on `open()`).
A different approach involves providing the iframe content through the `src` URL (for sidebar, I used a data address for the `url` attribute): Html code as IFRAME source rather than a URL. While this method worked in Firefox, it triggered a CORS error in Chrome stating `The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.` as well as `Warning: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame. Function-name: appAPI.message.addListener`.

These CORS issues seem illogical to me. It's all originating from my code within the same extension, injected into the same page. There shouldn't be any cross-origin problems since I created it all. If I have the authority to modify the origin, then worrying about security measures feels redundant.

javascript iframe crossrider

Answer 1

Answer №1

When utilizing the url sidebar property to load HTML content in your sidebar (such as a hosted webpage), you can take advantage of the extension's Run in Iframe functionality for seamless communication between the iframe extension and the parent window's extension.

To implement this, enable the extension to run in iframes (Settings > Run in Iframes) and then utilize the extension.js to handle loading the sidebar and managing messaging. Below is an example code snippet that loads a webpage containing a button with the ID btnSave:

Hosted webpage code:

<html>
<head>
</head>
<body>
  <div id="mySidebar">
    My sidebar content
    <br />
    <button id="btnSave">Save</button>
  </div>
</body>
</html>

extension.js code:

appAPI.ready(function($) {
  // Verify if running in iframe and the sidebar page is loaded
  if (appAPI.dom.isIframe() && $('#mySidebar').length) {
    // Set click handler for the button to send message to the parent window
    $('#btnSave').click(function() {
      appAPI.message.toCurrentTabWindow({
        type:'save',
        data:'My save data'
      });
    });
    // Exiting iframe code...
    return;
  }

  // Parent window message listener
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'save') {
      console.log('Extension:: Parent received data: ' +
        appAPI.JSON.stringify(msg.data));
    }
  });

  // Create the sidebar
  var sidebar = new appAPI.sidebar({
    position:'right',
    url: 'http://yourdomain.com/sidebar_page.html',
     title:{
      content:'Sidebar Title',
      close:true
    },
    opacity:1.0,
    width:'300px',
    height:'650px',
    preloader:true,
    sticky:true,
    slide:150,
    openAction:['click', 'mouseover'],
    closeAction:'click',
    theme:'default',
    scrollbars:false,
    openOnInstall:true,
    events:{
      onShow:function () {
        console.log("Extension:: Show sidebar event triggered");
      },
      onHide:function () {
        console.log("Extension:: Hide sidebar event triggered");
      }
    }
  });
});

However, if you are using the html sidebar property to load your sidebar's HTML, this solution may not be suitable since the extension does not operate in this scenario. You could explore alternative methods suggested in the StackOverflow thread cited to communicate with the parent window (dependent on the browser) which, in turn, can interact with the extension through our CrossriderAPI event.

[Disclaimer: I am a Crossrider employee]

Answer 2

When utilizing the url sidebar property to load HTML content in your sidebar (such as a hosted webpage), you can take advantage of the extension's Run in Iframe functionality for seamless communication between the iframe extension and the parent window's extension.

To implement this, enable the extension to run in iframes (Settings > Run in Iframes) and then utilize the extension.js to handle loading the sidebar and managing messaging. Below is an example code snippet that loads a webpage containing a button with the ID btnSave:

Hosted webpage code:

<html>
<head>
</head>
<body>
  <div id="mySidebar">
    My sidebar content
    <br />
    <button id="btnSave">Save</button>
  </div>
</body>
</html>

extension.js code:

appAPI.ready(function($) {
  // Verify if running in iframe and the sidebar page is loaded
  if (appAPI.dom.isIframe() && $('#mySidebar').length) {
    // Set click handler for the button to send message to the parent window
    $('#btnSave').click(function() {
      appAPI.message.toCurrentTabWindow({
        type:'save',
        data:'My save data'
      });
    });
    // Exiting iframe code...
    return;
  }

  // Parent window message listener
  appAPI.message.addListener(function(msg) {
    if (msg.type === 'save') {
      console.log('Extension:: Parent received data: ' +
        appAPI.JSON.stringify(msg.data));
    }
  });

  // Create the sidebar
  var sidebar = new appAPI.sidebar({
    position:'right',
    url: 'http://yourdomain.com/sidebar_page.html',
     title:{
      content:'Sidebar Title',
      close:true
    },
    opacity:1.0,
    width:'300px',
    height:'650px',
    preloader:true,
    sticky:true,
    slide:150,
    openAction:['click', 'mouseover'],
    closeAction:'click',
    theme:'default',
    scrollbars:false,
    openOnInstall:true,
    events:{
      onShow:function () {
        console.log("Extension:: Show sidebar event triggered");
      },
      onHide:function () {
        console.log("Extension:: Hide sidebar event triggered");
      }
    }
  });
});

However, if you are using the html sidebar property to load your sidebar's HTML, this solution may not be suitable since the extension does not operate in this scenario. You could explore alternative methods suggested in the StackOverflow thread cited to communicate with the parent window (dependent on the browser) which, in turn, can interact with the extension through our CrossriderAPI event.

[Disclaimer: I am a Crossrider employee]

Engaging with the crossrider sidepanel extension

Answer №1

Similar questions

What is the method for displaying an array separately for each item in JSON using JavaScript?

What is the best way to store and retrieve data from the current webpage using HTML, CSS, and JavaScript?

Revise my perspective on a modification in the backbone model

Creating an asynchronous function in Node.js that returns a promise, but experiencing unexpected behavior when using console.log to display the result

Implementing a language switch feature for text display in Node.js and Next.js websites

Convert h264 video to GIF using Node.js

The persistent connection of Socket.io results in consecutive connections while disregarding other occurring events

Clearing Input Values in Text Boxes, Dropdowns, and Checkboxes in ASP.NET MVC

Converting an object of objects into an associative array using Javascript and JSON

Resolving Route Problems in Node.js with Express

Utilize JSON categories to assign groups to TextFields or Selects according to a JSON data attribute

What is the best way to determine if two external values are equal within a mongodb criteria object?

Error: The JSONP request encountered an unexpected token, causing a SyntaxError

Is there a way to convert Firebase JSON into a JavaScript object? If so, what is the method to

Is it possible to use export default Enum in TypeScript?

Engage with React JS arrays of objects

Retrieve an Excel file using Selenium through a URL, but only obtain JavaScript code instead

JavaScript for loop similar to Python'sIn JavaScript, the

Error: Attempting to assign value to the 'innerHTML' property of null in a Wordle clone with local storage

Incorporating a for loop, ExpressJS and Mongoose repeatedly utilize the create method to generate