Javascript 试图在扩展名中获取页面的URL，但chrome.tabs.getSelected（）返回未定义的URL_Javascript_Angularjs_Google Chrome_Google Chrome Extension

Javascript 试图在扩展名中获取页面的URL，但chrome.tabs.getSelected（）返回未定义的URL

javascript angularjs google-chrome google-chrome-extension

Javascript 试图在扩展名中获取页面的URL，但chrome.tabs.getSelected（）返回未定义的URL,javascript,angularjs,google-chrome,google-chrome-extension,Javascript,Angularjs,Google Chrome,Google Chrome Extension,我正在尝试制作一个chrome扩展，作为其中的一部分，我需要使用该扩展获取访问页面的URL，以便能够管理它。但无法执行此操作，因为以下错误：angular.min.js:117 TypeError:无法读取未定义的属性“getSelected” My manifest.json： { "manifest_version": 2, "name": "Bookmark Manager Plugin", "description": "This extension will

我正在尝试制作一个chrome扩展，作为其中的一部分，我需要使用该扩展获取访问页面的URL，以便能够管理它。但无法执行此操作，因为以下错误：angular.min.js:117 TypeError:无法读取未定义的属性“getSelected”

My 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>

我的背景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:无法读取未定义的属性“query”

我不知道

AngularJS

，但您在

内容\u脚本中的代码不起作用，因为：
content\u脚本
无权访问chrome.api

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

在网页中查找未链接的URL并将其转换为超链接
增加字体大小以使文本更清晰
在DOM中查找和处理微格式数据

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

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

扩展名（getURL、inIncognitoContext、lastError、onRequest、sendRequest）
i18n
运行时（connect、getManifest、getURL、id、onConnect、onMessage、sendMessage）
储藏

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

而且后台
无权访问内容\u脚本

您必须在后台
中传输函数
|

您的函数不返回结果，因为chrome.tabs.getSelected
是异步的，即返回结果（未定义），而chrome.tabs.getSelected
未完成执行
相反，您需要在回调函数中执行操作


此外，chrome.tabs.getSelected
是从chrome33开始的。您必须使用chrome.tabs.query
：
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){

    if(tabs.length != 0) {

        // Something
    }
});

代码返回当前窗口中的活动选项卡
谢谢您的回答，但我已经阅读了所有这些文档，因为在那里找不到答案，所以决定将我的问题发布在这里。所以，如果你有任何想法，请详细解释。例如，要做什么而不是在getURL（）中返回？@LachezarB，您必须将工作选项卡的逻辑传输到后台脚本。我不知道在上下文AngularJS中如何使用getURL
。您可以尝试在angular模块内部传输getURL
，并执行以下操作调用外部方法。请参见本示例中chrome.api的使用方式：。或者，如果有可能从外部将函数的结果传输到$scope。可能是我需要此处所述的权限：@LachezarB，使用选项卡需要tabs
权限。您已经在manifest.json
中找到了它。你做了什么来解决这个问题？正如我前面提到的，我尝试使用promise作为asynchr请求，但还是一样：angular.min.js:117 TypeError:无法读取undefinedFirst的属性'query'，首先为什么第一个参数chrome.tabs.query
为空？第二，我认为您需要使用object，因为我如何理解http
在需要与远程http服务器通信时使用。也就是说，您创建了一个wrap函数，并在其内部chrome.tabs.query
传递到该对象的resolve的结果。差不多。然后调用wrap函数并可以使用.Then（）。这是一个模拟异步函数。你代码中的实现承诺让我觉得很奇怪。所以我写了第二段，非常感谢它现在可以工作了。第一个参数是string（指定请求目的地的相对或绝对URL），您可以传递chrome.api的方法。第二个参数是可选的，您不能使用它。你没有正确的使用方法是的，你帮我想出了使用$q的主意。谢谢
$scope.inputValue=getURL();

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

    if(tabs.length != 0) {

        // Something
    }
});