Chrome扩展程序:在页面上添加按钮并单击添加的元素后执行脚本

时间:2019-12-27 13:45:50

标签: javascript jquery google-chrome google-chrome-extension manifest.json

我正在开发一个chrome扩展程序,它将使用户能够单击添加的按钮以告知我他们的兴趣。

基本上,我构建了一个chrome扩展程序,其中显示了一个工具栏,我希望用户能够单击此工具栏并在其后执行脚本。

这是我的代码,它不起作用...

manifest.json文件:

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddTransient<IOperation, OperationDevelopment>();
    services.AddTransient<IOperation, OperationStaging>();
    services.AddTransient<IOperation, OperationProduction>();

    ...
}


public interface IOperation
{
    Guid OperationId { get; }
}

[Development]
public class OperationDevelopment : IOperation
{
}

[Staging]
public class OperationStaging : IOperation
{
}

[Production]
public class OperationProduction : IOperation
{
}

content.js文件:


{
  "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"
  ]

}




background.js文件:

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

});

chrome扩展程序可以很好地提醒产品的EAN代码,但扩展程序在附加的顶部栏上的click事件无法正常工作...

非常感谢您的反馈和帮助!

最诚挚的问候,

0 个答案:

没有答案