vendredi 29 mai 2015

Get url of the active tab in a chrome extension and display using $scope using angularjs

I am trying to get the current url of any active tab, so when a user clicks the icon then popup.html pops which is angular's home page. Then the angular controller is trying to get the url and then forwarding to html page using $scope.

manifest.json:

{
"browser_action": {
      "default_popup": "popup.html",
      "default_title": "__MSG_manifest_iconTitle__"
   },
   "background": {
      "page": "main.html"
   },

   "manifest_version": 2,
   "minimum_chrome_version": "18.0.0",
   "name": "description",
   "permissions": ["tabs", "\u003Call_urls>", "http://*/*", "https://*/*", "ftp://*/*" ],
   "update_url": "http://ift.tt/1cKeJ90",
   "version": "1.0.0"
}

popup.html:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div ng-view></div>

  <script src="assets/js/angular.min.js"></script>
  <script src="assets/js/angular-route.min.js"></script>
  <script src="assets/js/app.js"></script>
  <script src="assets/js/controllers.js"></script>
</body>
</html>

app.js:

var myApp =  angular.module('myApp', [
    'ngRoute',
    'myAppControllers'
]);

myApp.config(['$routeProvider', function($routeProvider) {
  "use strict";

  $routeProvider
    .when('/home', {
      templateUrl: 'assets/partials/home.html',
      controller: 'HomeCtrl'
    })
    // Set defualt view of our app to home
    .otherwise({
      redirectTo: '/home'
    });
  }
]);

controllers.js:

//to get current url
function get_current_url() {
  chrome.tabs.query({ active: true }, function(tabs) {
    var tabUrl = tabs[0].url;
    return tabUrl;
  });
}

var myAppControllers = angular.module('myAppControllers', []);

// Home controller
myAppControllers.controller('HomeCtrl', [
    "$scope",
    function($scope) {
        "use strict";

     //$scope.url = "tablink";
     $scope.url = get_current_url();

   }
]);

and home.html:

URL : {{ url }}

So, please how to achieve this, as I am getting only blank value after URL in the popup.

Aucun commentaire:

Enregistrer un commentaire