Angular中的Chrome擴展2/4

我想爲使用Angular 4的谷歌Chrome瀏覽器創建一個Chrome擴展。我只需要頁面的URL和標題，我點擊瀏覽器圖標（單擊事件）。到目前爲止，我已經做了以下事情Angular中的Chrome擴展2/4

我創建了一個eventPage，並且當我單擊擴展的圖標時該頁面正在調用。代碼=>

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 => 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'" 
}

來源

2017-06-23 Rakeschand

您已有['tabs.Tab']（https：// de veloper.chrome.com/extensions/tabs#type-Tab）對象在你的'onClicked'處理程序中，如果你擁有'tabs'權限，它將包含['url'和'title']（https：// developer。 chrome.com/extensions/tabs#property-Tab-url）。我必須仔細檢查，但我也認爲它可以通過'activeTab'權限獲得。 – Makyen

@Makyen我給了'activeTab'和'標籤'權限，但仍然沒有獲得網址和標題。 – Rakeschand

請將[問題]置於主題上：包括一個重複出現問題的[mcve]。對於Chrome擴展程序或Firefox WebExtensions，這通常意味着包含您的* manifest.json *以及一些背景，內容和/或彈出式腳本/ HTML。尋求調試幫助的問題（「爲什麼代碼不按我想要的方式工作？」）必須包括：（1）期望的行爲，（2）特定問題或錯誤，以及（3）重現它所需的最短代碼*在問題本身*。另請參閱：[我可以在這裏詢問什麼主題？]（http://stackoverflow.com/help/on-topic）和[問]。 – Makyen

這是怎麼弄到的擴展程序的網址和標題

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" />

的頂部該文件

來源

2018-02-08 11:53:28 Rakeschand

Angular中的Chrome擴展2/4

回答

相關問題