Chrome : Event Handler onClick to facebook sharer

Question

So I'm in alot of trouble now, I have to finish the project in 3 days, and i'm stuck in the links in chrome extension.

Project:

A google chrome extension that displays all avaible images in the current tab and make the share to several social networks.

By now my extension get all images, absolute or dynamic path, from the current tab and display them in the popup.html, and I need to add a image with the facebook logo in the right of the image of the website were it links to sharer.php

im using angular.js framwork. My files:

Popup.html - this is the div that displays the images.

 <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();


    });
});

i want to apply the event handler to the bindclick.js, it should be something like.

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

I tryed every thing but I can't make the onclick event to work, can you give me the code? I realy need help of someone who understands chrome extensions, if possible add me skype so I can learn quick beirao94

Answer 1

First, fblink is a class, not id, so getElementById will not work. Use document.querySelector or document.querySelectorAll to do this.

And it seems that you're using AngularJS and those links will be generated by AngularJS (inside the <li ng-repeat=...> block). You have to handle click events in AngularJS ways with the ng-click attribute. See http://docs.angularjs.org/tutorial/step_10 for more information.