1

I have a content script that will do some action on a facebok page. I want that the script is executed only if the user click on the chrome extension icon. I'm trying with this code but it will not work as expected. I'm using vue

manifest

{
  "manifest_version": 2,
  "name": "__MSG_extName__",
  "version": "1.0.0",
  "description": "",
  "default_locale": "en",
  "permissions": [
    "activeTab"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://www.facebook.com/*"],
      "js": ["js/content-script.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "__MSG_extName__",
    "default_icon": {
      "19": "icons/19.png",
      "38": "icons/38.png"
    }
  }
}

content-script (this code will always execute)

const storiesDiv = document.getElementsByClassName('_7h4p');
// debug only 
//console.log(storiesDiv);
// 
const featuredStories = [];
storiesDiv.forEach( (el) => {
    if( el.dataset.onkeypress ){
        featuredStories.push(el.dataset.onkeypress);
    }
});
const stories = featuredStories.filter( (el, index) => {
    if( index != 0 ){
        return el;
    }
});
stories.forEach( (el) => {
    var item = JSON.parse(el);
    console.log(item[0].a[0].preloadImageURIs[0]);
});

vue popup.html component (this code will not execute)

<script>
export default {
  name: "Popup",
  data() {
    return {
      isLoaded: false,
      images: null
    }
  },
  mounted() {
    //browser.runtime.sendMessage({});
    this.getFeaturedStories();
  },
  computed: {
    defaultText() {
      return browser.i18n.getMessage("extName");
    }
  },
  methods: {
    getFeaturedStories() {
      const storiesDiv = document.getElementsByClassName('_7h4p');
      // debug only 
      //console.log(storiesDiv);
      // 
      const featuredStories = [];
      storiesDiv.forEach( (el) => {
          if( el.dataset.onkeypress ){
              featuredStories.push(el.dataset.onkeypress);
          }
      });
      const stories = featuredStories.filter( (el, index) => {
          if( index != 0 ){
              return el;
          }
      });
      stories.forEach( (el) => {
          var item = JSON.parse(el);
          console.log(item[0].a[0].preloadImageURIs[0]);
          this.$set(this, 'images', item[0].a[0].preloadImageURIs[0]);
      });
    }
  }
};
</script>

background script (this code will not run ?)

browser.browserAction.onClicked.addListener( (tab) => {
  console.log(tab);
  browser.tabs.executeScript({
    file: "content-script.js"
  });
});
chicco.man
  • 41
  • 4
  • browserAction.onClicked won't fire when you have default_popup so remove the background script, its section, the `content_scripts` section, then call executeScript in your popup component directly. – wOxxOm Jun 23 '20 at 17:40
  • ok, I'm reading about and I want to use the `page_action` instead of browser action, this to be sure that the extension is loaded only on facebook pages. Also I will try as you suggested. Thanks – chicco.man Jun 23 '20 at 17:42
  • ok, but I need to have the extracted data in my vue component, if I run the script I will not be able to get the data inside the component. In this case I think that I need to use the message passing api to share date between the script and the component. It will be less difficult if I can interact with the page DOM from the component directly ! – chicco.man Jun 23 '20 at 18:03
  • The extensions API doesn't allow direct access to DOM from the popup to the web page so you'll have to send simple messages (strings/arrays/objects) from your content script or return the result of executeScript as shown [here](https://stackoverflow.com/a/4532567). Maybe there's a component that facilitates this task, try searching. – wOxxOm Jun 23 '20 at 18:08
  • I will use the message API that is the only reilable solution. I'm learning about chrome extension creation so many aspects are new to me. Thanks for the help! – chicco.man Jun 23 '20 at 18:39
  • @wOxxOm last thing. I've solved using the messaging api and following your tips. Now If I want to restrict the usage of the extension only to a page, I just need to set the `page_action` instead of browser action right? – chicco.man Jun 23 '20 at 18:46

0 Answers0