Question

我正在尝试制作Chrome扩展程序，作为其中的一部分，我需要获取具有此扩展程序的访问页面的URL，以便能够管理它。但是不能这样做，因为这个错误：angular.min.js：117 TypeError：无法读取属性＆＃39; getSelected＆＃39;未定义的

我的manifest.json：

{
    "manifest_version": 2,

    "name": "Bookmark Manager Plugin",
    "description": "This extension will manage the users visiting history",
    "version": "1.0",
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["app/scripts/chrome.js"],
        "run_at": "document_end"
    }],
    "browser_action": {
        "default_title": "Thumbnail Opener",
        "default_popup": "app/index.html",
        "default_icon": "app/favicon.ico"
    },
    "background": {
        "scripts": ["app/scripts/controllers/mainController.js"],
        "persistent": false
    },
    "permissions": [
        "tabs",
        "http://*/*",
        "activeTab"
    ]
}

我的弹出式html文件：

<!DOCTYPE html>
<html ng-app="somename">
<head lang="en">
    <meta charset="UTF-8">
    <title>Bookmarks Manager</title>
    <link rel="stylesheet" href="components/bootstrap/css/bootstrap.min.css">
    <script src="components/jquery.min.js"></script>
    <script src="components/angular.min.js"></script>
    <script src="components/bootstrap/js/bootstrap.min.js"></script>
    <script src="scripts/chrome.js"></script>
</head>
<body ng-controller="mainCtrl">
    <div style="margin-top:40px;"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <form id=>
                    <fieldset class="form-group">
                        <label for="input_1">Please Enter Keyword Pattern</label>
                        <input type="text" id="input_1" class="form-control" ng-model="inputValue"/>
                        <input type="hidden" id="hidd" name="url"/>
                        <button type="button" class="btn btn-primary">ADD</button>
                    </fieldset>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <p ng-repeat="pattern in existingData">{{pattern.name}} - {{pattern.url}}</p>
            </div>
        </div>
    </div>
    <script src="scripts/controllers/mainController.js"></script>
</body>
</html>

我的content_script文件：

function getURL() {
    chrome.tabs.getSelected(null, function(tab) {
        var myURL = tab.url;
    });
    return myURL;
}

我的背景js文件：

angular
    .module('somename', [])
    .controller('mainCtrl', ['$scope', '$location', function($scope, $location) {
        $scope.inputValue = getURL();
        $scope.showSuggestions = false;
        $scope.existingData = [{
                name: 'chrome extensions',
                url: 'https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/'
            }, {
                name: 'yii',
                url: 'http://www.yiiframework.com/download/'
            }, {
                name: 'Jquery',
                url: 'https://jquery.com/'
            },
        ];
        $scope.searchDatabase = function() {
            $scope.existingData.forEach(function(el) {
                if (el.name.indexOf($scope.inputValue) > -1) {
                    $scope.showSuggestions = true;
                } else {
                    var url;
                }
            })
        };
    }]);

有人可以帮忙吗，为什么没有定义chrome.tabs以及如何使其工作？

我也试过了：

在服务文件中：

angular.module('somename').factory('getURL', ['$http', function ($http) {
    return {

        promiseToHaveData: function () {

            return $http.get(chrome.tabs.query(null, function (tab) {

                return tab;
            })).then(function (tab) {

                var result = tab.url;

                return result;
            }, function (response) {

                console.log('Error has ocurred');
            });
        }
    };
}]);

并在控制器中：

angular.module('somename', [])
    .controller('mainCtrl', ['$scope', 'getURL', function ($scope, getURL) {

        getURL.promiseToHaveData().then(function (url) {

            $scope.inputValue = url;
        })
    }

但又无效 - angular.min.js:117 TypeError: Cannot read property 'query' of undefined

Answer 1

我不知道AngularJS，但content_scripts中的代码不起作用，因为：

content_scripts无法访问chrome.api。

以下是内容脚本可以执行的一些示例：



在网页中查找未关联的网址并将其转换为超链接



增加字体大小以使文字更清晰



在DOM中查找和处理微格式数据



但是，内容脚本有一些限制。他们不能：



使用chrome。* API，但以下情况除外：



扩展程序（getURL，inIncognitoContext，lastError，onRequest，sendRequest）



i18n



运行时（connect，getManifest，getURL，id，onConnect，onMessage，sendMessage）



存储





使用其扩展程序页面定义的变量或函数



使用由网页或其他内容脚本定义的变量或函数

$scope.inputValue=getURL();

background无法访问content_scripts。

您必须在background传送功能。

Content Scripts | Architecture

你的函数没有返回结果，因为chrome.tabs.getSelected是异步的，结果将被返回（未定义），而chrome.tabs.getSelected没有完成执行。

而是return您需要在回调函数中执行操作。

Asynchronous vs. synchronous methods

此外，自Chrome 33起，chrome.tabs.getSelected为deprecated。您必须使用chrome.tabs.query：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

    if(tabs.length != 0) {

        // Something
    }
});

代码返回当前窗口中的活动选项卡。

chrome.tabs.query

尝试在扩展名中获取页面的URL，但chrome.tabs.getSelected（）返回undefined

1 个答案: