如何调用Crossrider中声明的javascript函数；背景.js“；通过单击我的网站页面上的按钮？_Javascript_Jquery_Json_Browser_Crossrider

如何调用Crossrider中声明的javascript函数；背景.js“；通过单击我的网站页面上的按钮？

javascript jquery json browser

如何调用Crossrider中声明的javascript函数；背景.js“；通过单击我的网站页面上的按钮？,javascript,jquery,json,browser,crossrider,Javascript,Jquery,Json,Browser,Crossrider,如何通过单击我的网站页面上的按钮来调用Crossrider“background.js”中声明的javascript函数我的网站页面“”中有一个按钮输入。我还在[a cross browser extension framework]“background.js”范围中定义了一个函数“myExtensionFunction”，它接受javascript对象/JSON作为参数。是否可以通过单击我的网站页面中的按钮来传递javascript对象/JSON作为参数并调用此函数，反之亦然？如果是，怎么

如何通过单击我的网站页面上的按钮来调用Crossrider“background.js”中声明的javascript函数

我的网站页面“”中有一个按钮输入。我还在[a cross browser extension framework]“background.js”范围中定义了一个函数“myExtensionFunction”，它接受javascript对象/JSON作为参数。是否可以通过单击我的网站页面中的按钮来传递javascript对象/JSON作为参数并调用此函数，反之亦然？如果是，怎么做？若否，原因为何

我从下面的教程中了解到，“如何将页面变量的值传递给扩展范围？”，但无法解决上述问题。

我尝试了下面的代码，但给了我警报“功能不存在！”，果然,，因为它找不到在中定义的函数 Crossrider浏览器扩展名[extension.js文件]

Javascript file:
---------------

var lxnsT = [];
lxnsT.push({ "u_n": "MegaSearches", "u_a": "URL" });

function myExtFn() {
    if (typeof jsOpenSession == 'function') {
        myExtensionFunction(lxnsT);
    } else {
        alert('function does not exist!');
    }
}

HTML file:
---------------
<button id="myExtFnId" onclick="myExtFn()"> My Button </button>

Javascript文件：
---------------
var lxnsT=[]；
lxnsT.push（{“u_n”：“MegaSearches”，“u_a”：“URL”}）；
函数myExtFn（）{
if（jsOpenSession的类型=='function'）{
myExtensionFunction（lxnsT）；
}否则{
警报（'功能不存在！'）；
}
}
HTML文件：
---------------
我的纽扣

如果我正确理解您的需求，您可以通过使用extension.js文件作为页面和后台作用域之间的管道来实现您的目标。您必须这样做，因为后台作用域不能直接访问HTML页面作用域

要实现该方案，请将库添加到您的页面，使用它在扩展可用时显示按钮，并配置按钮的单击处理程序以将对象发送到扩展范围，如下所示：

HTML文件：

<html>
<head>
<style>.hidden {display: none;}</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://w9u6a2p6.ssl.hwcdn.net/plugins/javascripts/crossriderAPI.js"></script>
<script type="text/javascript">
  // Replace XXXXX with the extension id
  var extId = "XXXXX";

  // Once the page is ready
  $(function() {
    CrossriderAPI.isAppInstalled(extId, function(isInstalled) {
      // Displays button if the extension is installed and set click handler
      console.log('Page:: Extension installed? ' + isInstalled);
      if (isInstalled) {
        console.log('Page:: Showing button and adding click');
        $("#myExtFnId").toggleClass("hidden").click(function() {
          $('body').fireExtensionEvent('execBgFunc', {fn:'myBgFn', data:'my data'});
        });
      }
    });
  });
</script>
</head>
<body>
<button id="myExtFnId" class="hidden">My Button</button>
</body>
</html>

appAPI.ready(function($) {
  $('body').bindExtensionEvent('execBgFunc',
    function(e, data) {
      console.log('Extn:: Bind Received: ' + appAPI.JSON.stringify(data));
      appAPI.message.toBackground(data);
  });
});

appAPI.ready(function($) {
  appAPI.message.addListener(function(msg) {
    if (msg.fn === 'myBgFn')
      console.log('Bg:: Received data: ' + appAPI.JSON.stringify(msg.data));
  });
});

最后，在background.js文件中，使用消息侦听器接收数据并执行所需的功能，如下所示：

background.js文件：

<html>
<head>
<style>.hidden {display: none;}</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://w9u6a2p6.ssl.hwcdn.net/plugins/javascripts/crossriderAPI.js"></script>
<script type="text/javascript">
  // Replace XXXXX with the extension id
  var extId = "XXXXX";

  // Once the page is ready
  $(function() {
    CrossriderAPI.isAppInstalled(extId, function(isInstalled) {
      // Displays button if the extension is installed and set click handler
      console.log('Page:: Extension installed? ' + isInstalled);
      if (isInstalled) {
        console.log('Page:: Showing button and adding click');
        $("#myExtFnId").toggleClass("hidden").click(function() {
          $('body').fireExtensionEvent('execBgFunc', {fn:'myBgFn', data:'my data'});
        });
      }
    });
  });
</script>
</head>
<body>
<button id="myExtFnId" class="hidden">My Button</button>
</body>
</html>

appAPI.ready(function($) {
  $('body').bindExtensionEvent('execBgFunc',
    function(e, data) {
      console.log('Extn:: Bind Received: ' + appAPI.JSON.stringify(data));
      appAPI.message.toBackground(data);
  });
});

appAPI.ready(function($) {
  appAPI.message.addListener(function(msg) {
    if (msg.fn === 'myBgFn')
      console.log('Bg:: Received data: ' + appAPI.JSON.stringify(msg.data));
  });
});

[免责声明：我是一名Crossrider员工]

按我@CatalinSterian:这无关紧要，这是不同范围的扩展代码。你想用这个按钮做什么？在Crossrider中，有后台作用域和扩展页作用域--您尝试执行的操作将影响您应该执行的操作。我希望允许安装了Crossrider浏览器扩展的网站用户通过单击我网站上的按钮导入他们在本地浏览器中拥有的所有书签。我已经通过点击扩展本身中的一个按钮来实现了这一点，但是我想让用户能够使用相同的功能直接从网站上实现这一点。