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

React Native encounters issues with removing the reference to the callback attribute upon unmounting

Utilizing Smart Table for Data Binding with JSON Dataset

Menu icon in Next.js/React/Tailwind not triggering close action when clicked again, causing responsiveness issue

Creating a React component that can dynamically render either an image or a video based on the incoming API data is a great way to

How to retrieve the value of a selected radio button in an AngularJS radio button group that uses ng-repeat

Npm is unable to locate the package.json file in the incorrect directory

Tips for updating the border color of a button:

Determine the amount of time that can be allocated based on the attributes contained within the object

sticky bootstrap datepicker anchored to the top of the screen

Automatically generated VueJS function

Managing various swipe interactions using HTML and JavaScript/jQuery

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

Having trouble with the Wordpress JS CSS combination not functioning properly and unable to determine the cause

Navigating Error: net::ERR_CONNECTION while utilizing Puppeteer

There seems to be a problem with the sorting functionality on the table in React JS,

What is the best way to merge different Vue JS instances (each linked to different html divs) into one cohesive unit using Vue

Issue with two Jquery slider forms

Tips on transitioning from Modal1 to Modal2 in Ionic after a successful submit button press?

Exploring the World of Browserify Submodules

How to create expandable nodes with lazy-loaded children in Dynatree?