[英]Chrome : Event Handler onClick to facebook sharer
所以我现在遇到了很多麻烦,我必须在3天内完成这个项目,而且我已经陷入了chrome扩展中的链接。
项目:
一个谷歌浏览器扩展程序,显示当前选项卡中的所有可用图像,并分享到几个社交网络。
到现在为止,我的扩展程序从当前选项卡获取所有图像,绝对或动态路径,并在popup.html中显示它们,我需要在网站图像右侧添加带有facebook徽标的图像,如果它链接到sharer.php
即时通讯使用angular.js框架。 我的文件:
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
首先, fblink
是一个类,而不是id,所以getElementById不起作用。 使用document.querySelector
或document.querySelectorAll
执行此操作。
似乎你正在使用AngularJS,这些链接将由AngularJS生成(在<li ng-repeat=...>
块内)。 您必须使用ng-click
属性以AngularJS方式处理单击事件。 有关更多信息,请参见http://docs.angularjs.org/tutorial/step_10 。
知道方觉说的话,我来与你分享解决方案。
因此angularjs有一个叫做ng-click的函数,所以我们在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)];
};
所以我们可以轻松调用html代码中的javascript函数,即使使用manifest v2也是如此。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.