크롬 : 이벤트 처리기 onClick to facebook sharer

Question

이제는 문제가 많아서 3 일 만에 프로젝트를 마쳐야하며 크롬 확장 링크가 붙어 있습니다.

프로젝트 : 현재 탭의 모든 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

내가 bindclick.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(); 


    }); 
}); 

, 그것은 같은 것을해야한다.

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를 배울 수있다.

Answer 1

처음에는 fblink이 클래스가 아니기 때문에 getElementById는 작동하지 않는다. 이 작업을 수행하려면 document.querySelector 또는 document.querySelectorAll을 사용하십시오.

그리고 AngularJS를 사용하고 있으며 해당 링크는 AngularJS (<li ng-repeat=...> 블록 내부)에서 생성됩니다. ng-click 속성을 사용하여 AngularJS 방식으로 클릭 이벤트를 처리해야합니다. 자세한 내용은 http://docs.angularjs.org/tutorial/step_10을 참조하십시오.

Answer 2

어떤 방향 觉이 말한 것인가, 나는 당신에게 해결책을 알려 주러 왔습니다.

그래서 AngularJS와는 그래서 우리가 할 것은 controler를 내부 popup.js에

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

지금 popup.html에, NG가 클릭라는 함수를 가지고 우리는

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

을 우리 easly는 매니 페스트 v2를 사용하는 경우에도 HTML 코드에서 javascript 함수를 호출 할 수 있습니다.