WebExtensions : Creating a HTML page with content

Add-ons Development
#1

Hello everyone!

I am in the process of creating my first add-on with the help of Mozilla WebExtensions. Kindly bear with me for the naive doubts/issues below.

Issue 1: Refer following code->

var array=[];
if(chosenClass===“Youtube”){
chrome.bookmarks.getRecent(500, gotMostRecent);
function gotMostRecent(bookmarkItems) {
if (bookmarkItems.length) {
console.log(bookmarkItems.length);
for (i=0;i<bookmarkItems.length;i++)
{
var str = bookmarkItems[i].url;
var patt = /youtube/;
if(patt.test(str))
{
array.push(str);
console.log(array.length);
console.log(str);
}
}
}
// console.log(array); ->FIRST
}
// console.log(“");
// console.log(array); ->SECOND
// console.log("**”);
window.open(“bookmarks_content.html”);
console.log(“Youtube”);
}

As you can see, I am extracting all the bookmarks having “youtube” in its URL and storing it into javascript array variable. For the FIRST console.log(array), it display all the selected URLs in console, but for the SECOND it shows empty. Why is it so?

Issue 2: In the above code you can see that I am opening a new page “bookmarks_content.html” once I fill the array variable. How can I dynamically fill the contents of “bookmarks_content.html” with contents of array variable i.e. how can I get all the selected bookmarks displayed on “bookmarks_content.html” page? (I have tried with innerHTML and other approaches but with no success.) Also kindly refer to the code in “bookmarks_content.html” below:

html
script language=“javascript” type=“text/javascript”
//var ret = win.my_special_setting;
document.write(“Hello”);
/script
/html

(I had to remove <…> as this page was not reading it)

No doubt the page “bookmarks_content.html” opens but I cannot see the “Hello” message in there, when I try to open the window through my add-on. But if I explicitly open the html page (all alone, without add-on environment) I can see the “Hello” message there. Is there some kind of content security measures taken in WebExtensions?

Kindly help me with this. Thank you for your interest!

#2

Hi,

Without getting into details, remember that it’s recommended to seek help (in Stackoverflow for example) by looking for help also for Chrome extensions. WebExtension API is basically the framework in which developers develop extensions for Chrome, Opera & Edge.

Cheers,
Larry P.

#3

For the FIRST console.log(array), it display all the selected URLs in console, but for the SECOND it shows empty. Why is it so?

That’s because the “first” one is actually the second one, as it inside a function which is invoked whenever the bookmarks are actually gotten (see async javascript, callbacks and event listeners).

I think formatting the code like this makes it a little more obvious:

var array=[];
function gotMostRecent(bookmarkItems) {
  if (bookmarkItems.length) {
    console.log(bookmarkItems.length);
    for (i=0;i<bookmarkItems.length;i++)
    {
      var str = bookmarkItems[i].url;
      var patt = /youtube/;
      if(patt.test(str))
      {
        array.push(str);
        console.log(array.length);
        console.log(str);
      }
    }
  }
  console.log(array); ->FIRST
}
if(chosenClass==="Youtube") {
  chrome.bookmarks.getRecent(500, gotMostRecent);
  console.log("***************");
  console.log(array); ->SECOND
  console.log("*****************");
  window.open("bookmarks_content.html");
  console.log("Youtube");
}

This does exactly the same as the code you posted, just that the function is defined somewhere else, which doesn’t change the behavior at all, since chrome.bookmarks.getRecent invokes the function whenever it has fetched the bookmarks in the background.

To your second question: I’d recommend using chrome.storage.local for that: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage

You’d store the array in there and then load it from the html page, though you might not even need the background page except for opening your site, since it can directly use the WebExtension APIs, as long as it is packaged with your extension.