0

After some hours spent in debug, I've managed how to get some data property from a dynamic generated div on a page. I've used the popup.js file as the content script to run when this page is loaded and I was supposing that this will give me the ability to append the retrived data to the popup.html page using jQuery, but this will not work. I need a way to add some html and the data to popup.html, how I can achieve this? I need to use a separate content script to grab the data and another one script to manage the popup.html page in my extension? Any suggestion?

manifest.json

{
  "name": "FBSR",
  "short_name": "FBSR",
  "version": "1.0",
  "author": "Me",
  "description": "!",
  "manifest_version": 2,
  "permissions": ["tabs"],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "matches": ["https://www.facebook.com/*"],
    "js": ["js/jquery.min.js","js/popup.min.js"]
  }]
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>GOAL - v1.0</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="css/fontawesome-all.min.css" type="text/css" />
    <link rel="stylesheet" href="css/main.min.css" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/popup.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div class="container wrapper">
      <!-- I want to append the data in the stories row div -->
      <div class="row stories"></div>
      <hr>
    </div>
  </body>
</html>

popup.js

(function($){
  $(document).ready(function(){
    console.log('Extension Started!');
    var el = $(document).find('#stories_tray');
      var child = el.find('._827c');
        $.each(child, function(i){
          var div = $(child[i])
            .find('._7h4p')
            .attr('data-onkeypress');
          var d = JSON.parse(div);
          var c = d[0].a;
          var l;
// also this part is not clear, in the beginning I was not able to get the desired data attribute property. 
//See this question: https://stackoverflow.com/questions/57698205/get-dynamic-div-data-properly-with-jquery
            if(typeof c != 'undefined'){
              console.log(d[0].a[0].preloadImageURIs[0]);
              l = d[0].a[0].preloadImageURIs[0];
            }
// these lines will not work, nothing is added to the DOM
            var html = '<div class="col-4 card">';
            html += '<a class="" href="'+l+'">VIEW</a>';
            html += '</div>';
            $('.stories').append(html);
        });
  });
}(jQuery));
jihuuNI
  • 551
  • 2
  • 5
  • 17
  • `$('.stories').append(html);` - does `.stories` exist at this point? You can check with `console.log($('.stories').length)` – user7290573 Aug 29 '19 at 12:39
  • @user7290573 `.stories` is a DOM element of the popup.html page, it's not created dynamically, I suppose that it's exists already. – jihuuNI Aug 29 '19 at 12:54
  • You suppose? Have you checked for certain, though? It will be helpful to rule it out. – user7290573 Aug 29 '19 at 12:57
  • @user7290573 I've checked if the element exists, the consolle will log 0 so this means that until the popup window is opened, no one of the DOM elements in popup.html is vailable?how fix this? – jihuuNI Aug 29 '19 at 13:00
  • In that case it sounds like you'll have to come up with a way of making the popup show so that it populates the HTML you need. Maybe a simple `.click()` and then `.hide()` although that's not ideal. – user7290573 Aug 29 '19 at 13:04
  • @user7290573 I don't know if this is possible with the popup of a chrome extension – jihuuNI Aug 29 '19 at 13:09
  • Nor do I, I'm afraid. I don't think I can offer any more advice as I'm not really familiar with Chrome's extensions, so best of luck to you. – user7290573 Aug 29 '19 at 13:13

0 Answers0