Question

我正在尝试使用Angular 4为Google Chrome浏览器创建Chrome扩展程序。我只需要页面的网址和标题，我点击浏览器图标（点击事件）。到目前为止，我已经做了以下事情

我创建了一个eventPage，当我点击扩展图标时会调用该页面。代码=＆GT;

if (typeof chrome.browserAction !== 'undefined') {
    chrome.browserAction.onClicked.addListener(function(tab) {
        listService.getBookmarks().then(bookmarkLists => {
            bookmarkLists = bookmarkLists;
            getSelectedTab(bookmarkLists);
        });
    });
} else {
    console.log('EventPage initialized');
}

function getSelectedTab(bookmarkLists) {
    chrome.tabs.getSelected(null, function(tab) {
        let newBookmark: Object = {
            name: tab.title,
            url: tab.url
        };
        bookmarkLists.push(newBookmark);
        listService.setBookmarks(bookmarkLists);
    });
}

listService.getBookmarks =＆gt; listService有一个方法getBookmarks，它已经有一些数据作为键值对。

如果有人能告诉我如何获取我触发的页面的URL和标题，请单击扩展名单击。

建议修改 的manifest.json

{
  "manifest_version": 2,

  "name": "Extension",
  "description": "This extension ...",
  "version": "1.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "browser_action": {
    "default_popup": "index.html"
  },
  "permissions": [
    "storage",
    "tabs",
    "activeTab",
    "http://*/*",
    "https://*/*"
  ],

  "background": {
    "page": "index.html",
    "persistent": false
  },

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

Answer 1

这就是我在扩展名

中获取网址和标题的方式

var that = this;
chrome.tabs.query({
    currentWindow: true,
    active: true
}, function(tabs) {
  console.log(tabs[0]);
  if (tabs.length > 0) {
    if (tabs[0].url !== undefined && tabs[0].url !== null && tabs[0].url !== '') {
      that.tabId = tabs[0].id;
      that.tabURL = tabs[0].url;
      that.tabTitle = tabs[0].title;
      that.favIconUrl = tabs[0].favIconUrl;
    }
  }
});

将此文件包含在组件

之上

///<reference path="../../../node_modules/@types/chrome/index.d.ts" />

Angular 2/4中的Chrome扩展程序

1 个答案: