Chrome浏览器：事件处理程序onClick到Facebook分享器

所以我现在很麻烦，我必须在3天内完成项目，并且我被卡在Chrome扩展的链接中。Chrome浏览器：事件处理程序onClick到Facebook分享器

项目：

，显示在当前选项卡的所有avaible图像，使份额几个社交网络

谷歌浏览器扩展。

现在我的分机得到的所有图片，绝对或动态路径，从当前选项卡，并在popup.html显示他们，我需要与Facebook商标在该网站的图像的右侧添加图像它链接到sharer.php

即时通讯使用angular.js framwork。我的文件：

Popup.html - 这是显示图像的div。

<script src="js/lib/jquery-1.8.2.min.js"></script> 
    <script src="js/lib/angular.min.js"></script> 

    <script src="js/app/app.js"></script> 
    <script src="js/app/popup.js"></script> 
    <script src="js/app/bindclick.js"></script> 
<div ng-controller="PageController"> 
      <div>{{message}}</div> 
      <h2>Page:</h2> 
      <div>{{title}}</div> 
      <div id="url">{{url}}</div> 
      <h2>Has Links:</h2> 
      <ul> 
       <li ng-repeat="pageInfo in pageInfos"> 
        <div><img src={{pageInfo}} class="imagemPopup"/><img src="http://formaemflor.com.br/loja/skin/frontend/default/perfume/images/facebook_icon.png" class="fblink" style="width: 50px; height: 50px"/></a></div> 
       </li>      
      </ul> 
     </div>

content.js

//alert('content script loaded'); 

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) { 

    if (request.action == 'PageInfo') { 
     var pageInfos = []; 

     $('img').each(function() { 
      pageInfos.push($(this)[0].src); 
     }); 
     sendResponse(pageInfos); 
    } 
});

popup.js

myApp.service('pageInfoService', function() { 
    this.getInfo = function(callback) { 
     var model = {}; 

     chrome.tabs.query({'active': true}, 
     function (tabs) { 
      if (tabs.length > 0) 
      { 
       model.title = tabs[0].title; 
       model.url = tabs[0].url; 

       chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) { 

        model.pageInfos = response; 

        callback(model); 
       }); 
      } 

     }); 
    }; 
}); 

myApp.controller("PageController", function ($scope, pageInfoService) { 

    pageInfoService.getInfo(function (info) {   
     $scope.title = info.title; 
     $scope.url = info.url; 
     $scope.pageInfos = info.pageInfos; 

     $scope.$apply(); 


    }); 
});

我想事件处理程序适用于bindclick.js，它应该是这样的。

document.getElementById('.fblink').addEventHandler('click', function(){ 
var url='http://www.facebook.com/sharer/sharer.php?u='+pageInfo.url; 
chrome.tabs.create({ url: url }); 
});

我尝试了所有的事情，但我无法让onclick事件工作，你可以给我代码吗？我真的需要一个懂得Chrome扩展的人的帮助，如果可能的话加我Skype，这样我就可以学会快速beirao94

来源

2013-07-18 João Beirão

首先，fblink是一个类，而不是id，所以getElementById不起作用。使用document.querySelector或document.querySelectorAll来做到这一点。

而且你似乎在使用AngularJS，这些链接将由AngularJS（在<li ng-repeat=...>块内）生成。您必须使用ng-click属性以AngularJS方式处理点击事件。有关更多信息，请参阅http://docs.angularjs.org/tutorial/step_10。

来源

2013-07-19 00:58:21

所以我应该这样做？

您需要定义一个$ scope.fblinkClick（例如）函数，并在其中调用chrome.tabs.create，并将ng设置为点击”fblinkClick （pageInfo.url）”。 –

它不会工作，ng-click它是一个控制器的点击，这意味着，而不是在图像中的点击事件，它在扩展图标中，我点击图标弹出窗口变得可见和一个新的窗口使用所有图像的facebooksharer创建..它很容易修复的图像，这是一个数组，如此恶劣只是使用pageInfos [0] ....，但我仍然无法获得每个图像可能的点击 –

方觉说，我来和大家分享一下解决方案。

所以angularjs有一个名为NG单击功能，所以我们做的是在popup.html

<img src="http://formaemflor.com.br/loja/skin/frontend/default/perfume/images/facebook_icon.png" class="fblink" ng-click"sharefb(pageInfo)"/>

现在在popup.js的CONTROLER里面我们做

$scope.sharefb = function($url){ 
     chrome.window.create({url: 'http://www.facebook.com/sharer/sharer.php?u='+$url}); // or 
     chrome.tabs.create({url: 'http://www.facebook.com/sharer/sharer.php?u='+$url)]; 
};

所以我们可以轻松地在html代码中调用JavaScript函数，即使使用清单v2也是如此。

来源

2013-07-22 20:06:18

Chrome浏览器：事件处理程序onClick到Facebook分享器

回答

相关问题