Question

我正在尝试构建一个从网页上抓取电子邮件ID的扩展程序。问题是......

popup.html视图未在控制器中更新 $ scope.emailList 和 $ scope.count 的新值强> popup.js 即可。但是，当我执行 Inspect Popup 时，它会显示附加到 $ scope 变量的新值，但我看不到任何可以查看和处理的错误。

popup.js

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

app.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {

    //Fetch URL of current Tab open in Chrome
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function(tabs) {
        // and use that tab to fill in out title and url
        var tab = tabs[0];

        $scope.cpUrl = tab.url;
        console.log($scope.cpUrl); //I SEE ONLY THIS LINE WHEN I INSPECT POPUP
    });

    $scope.appLoaded = false;   
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        console.log("Message received: ", request); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view

        $scope.emailList = request;
        $scope.count = Object.keys($scope.emailList).length;
        console.log("Emails found: " + $scope.count); //I SEE ONLY IN Inspect Popup BUT NOT IN popup.html view
        $scope.appLoaded = true;

        sendResponse({status: "Received JSON data!"});
    });

}]);

内容脚本 - 相关部分

var jsonData = scrape(); // scrape() is included in the Content Script which I've chosen to leave out here. 
console.log(jsonData);

chrome.runtime.sendMessage(jsonData, function(response) {
    console.log(response);
});

background.js

var background = {
    injectScript: function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.executeScript(tabs[0].id, {file: "myscript.js"});
        });
    }    
};

background.injectScript();

popup.html

<!DOCTYPE html>
<html ng-app="emailScraper">
    <head>
        <!--
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">

        <link rel="stylesheet" href="css/lib/concise-v3.4.0-UI-dist/concise.min.css">
        -->
        <link rel="stylesheet" href="css/lib/materialize/materialize.min.css" media="screen,projection">
        <link rel="stylesheet" href="css/app/popup.css">
    </head>
    <body ng-controller="AppCtrl">
        <div id="popWindow">
            <div class="navbar-fixed">
                <nav>
                    <div class="nav-wrapper">
                        <h5 class="brand-logo">Email Scraper</h5>
                        <span class="badge">
                            <a># found </a>
                            <a>{{count}}</a>
                        </span>
                    </div>
                </nav>
            </div>

            <div class="progress" ng-hide="appLoaded">
                <div class="indeterminate"></div>
            </div>

            <div class="progress" ng-show="appLoaded">
                <div class="determinate" style="width: 100%"></div>
            </div>

            <div class="collection" ng-if="count > 0">
                <a href="#modal1" data-target="modal1" class="collection-item" ng-repeat="email in emailList"><h6>{{email}}</h6></a>
            </div>

            <div ng-if="count === 0">
                <p class="flow-text">&nbsp;Sorry, No Email IDs found.</p>
            </div>
        </div>

        <script type="text/javascript" src="js/lib/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="js/lib/angular_1.5.6/angular.min.js"></script>
        <script type="text/javascript" src="js/lib/materialize/materialize.min.js"></script>
        <script type="text/javascript" src="js/app/popup.js"></script>
    </body>
</html>

popup.html视图不在popup.js中更新控制器中新分配的$ scope变量值

0 个答案: