0

I am working on a chrome extension that will enable user to click on an added button to inform me of their interest.

Basically, I built a chrome extension which displays a toolbar and I want the user to be able to click on this toolbar and execute a script after it.

Here are my codes and it does not work...

manifest.json file :


{
  "manifest_version": 2,
  "name": "XX Extension",
  "version": "1.0",
  "description": "The best extension for my friends",

  "icons":{
    "128" : "images/icon128.png",
    "48" : "images/icon48.png",
    "16" : "images/icon16.png"
  },


  "background": {
    "scripts": ["js/jquery-3.4.1.min.js", "js/background.js"]
  },


  "permissions": [
        "contextMenus",
        "activeTab",
        "tabs",
        "notifications"
  ],

  "content_scripts": [
  {
    "matches": ["https://www.mysite.fr/produit/*", "*://*.mysite.fr/produit/*"],
    "css": ["css/extension_style.css"],
    "js": ["js/jquery-3.4.1.min.js", "js/content.js"]
  }
  ],

  "browser_action": {
   "default_icon": "images/icon16.png",
   "default_title": "XX Extension",
   "default_popup": "popup.html"
  },

    "web_accessible_resources": [

      "toolbar.html",
      "css/extension_style.css"
  ]

}

content.js file : 

var script_text=$("script:contains(['ean'])").html();
var product_ean=script_text.split("['product']['ean']")[1].split(";")[0].replace("= '","").replace("'","");
chrome.runtime.sendMessage(product_ean);

var url = chrome.extension.getURL('toolbar.html');
var height= '35px';
var iframe = "<iframe src='"+url+"' id='myOwnCustomToolBar_TT91' style='height:"+height+"'></iframe>";

$('html').append(iframe);

$('body').css('transform','translateY('+height+')');

/* Topbar clicked */

$('#myOwnCustomToolBar_TT91').on('click', function(){

alert('it is clicked');
// do stuff executing js script

});

background.js file : 


chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
    alert("Le code EAN de ce produit RDC est "+response);
});

chrome.browserAction.onClicked.addListener(function(){

    chrome.tabs.executeScript(null, {
        code : "alert('Wow it is working guy');"
    });


});

The chrome extension work well to alert the EAN code of the product but the click event on the appended topbar by the extension does not work...

Thank you very much for your feedback and help !

Best regards,

Tayfun Akaltun
  • 23
  • 1
  • 6
  • `click` event doesn't work on iframes. Add the listener inside toolbar.js (the script that's loaded inside iframe html) on `body` for example or any other relevant inner element. – wOxxOm Dec 27 '19 at 13:53
  • Perfect, it is now resolved - I just changed the ifram by a classic div :) it works and i can send messages to the background.js to process it :) Thank you ! – Tayfun Akaltun Dec 27 '19 at 16:26

0 Answers0