Хром: обработчик событий onClick to facebook sharer

Так что у меня сейчас много неприятностей, я должен закончить проект за 3 дня, и я застрял в ссылках в chrome extension.Хром: обработчик событий onClick to facebook sharer

Проект:

хромированный расширение Google, которая отображает все Avaible изображения в текущей вкладке и сделать свою долю в нескольких социальных сетях.

К настоящему моменту мое расширение получает все изображения, абсолютный или динамический путь, с текущей вкладки и отображает их в popup.html, и мне нужно добавить изображение с логотипом facebook в правой части изображения веб-сайта были ли ссылки на sharer.php

im использование угловой фреймворка. Мои файлы:

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 работать, не могли бы вы дать мне код? Мне действительно нужна помощь того, кто понимает хром-расширения, если возможно, добавьте меня в skype, чтобы я мог быстро изучить beirao94

источник

2013-07-18 João Beirão

Во-первых, fblink - это класс, а не id, поэтому getElementById не будет работать. Используйте document.querySelector или document.querySelectorAll для этого.

И кажется, что вы используете AngularJS, и эти ссылки будут созданы AngularJS (внутри блока <li ng-repeat=...>). Вы должны обрабатывать события click в режимах AngularJS с помощью атрибута ng-click. См. http://docs.angularjs.org/tutorial/step_10 для получения дополнительной информации.

источник

2013-07-19 00:58:21

, так что я должен просто сделать что-то вроде этого?

Вам нужно определить функцию $ scope.fblinkClick (например) и вызвать chrome.tabs.create в ней и установить ng-click на что-то вроде" fblinkClick (pageInfo.url)». –

это не работает, ng-click - это щелчок элемента управления, это означает, что вместо того, чтобы делать клик на изображениях, он отображается в значке расширения, я нажимаю значок, чтобы всплывающее окно стало видимым, и новые окна создается с помощью facebooksharer со всеми изображениями. Изображения, которые легко исправить, это массив, который так сильно использует pageInfos [0] ...., но я все еще не могу получить щелчок по каждому изображению –

Пользуясь тем, что сказал 方觉, я пришел поделиться с вами решением.

Так angularjs есть функция под названием нг-клик, так что мы делаем в 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 внутри контроллера мы делаем

$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)]; 
};

Таким образом, мы могут легко вызывать javascript-функции в html-коде, даже с манифестом v2.

источник

2013-07-22 20:06:18

Хром: обработчик событий onClick to facebook sharer

ответ

Смежные вопросы