Chrome-Erweiterung in Angular 2/4

Ich versuche, eine Chrome-Erweiterung für Google Chrome-Browser mit Angular 4 zu erstellen. Ich brauche nur die URL und den Titel der Seite, wo ich auf das Browser-Symbol klicke (Ereignis klicken). Bisher habe ich folgende Dinge getanChrome-Erweiterung in Angular 2/4

Ich habe eine eventPage erstellt und diese Seite wird aufgerufen, wenn ich auf das Symbol der Erweiterung klicke. Code =>

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 hat eine Methode getBookmarks, die bereits einige Daten als Schlüssel hat, Wertepaar.

Wenn jemand weiß, wie man die URL und den Titel der Seite, auf die ich triggere, bekommt, klicken Sie auf die Erweiterung klicken.

Empfohlene Edits 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'" 
}

Quelle

2017-06-23 Rakeschand

Sie haben bereits das ['tabs.Tab'] (https: // de upper.chrome.com/extensions/tabs#type-Tab) Objekt in Ihrem 'onClicked'-Handler, der die '' url'' und '' title'' enthält, wenn Sie die Berechtigung 'Tabs' haben (https: // developer. chrome.com/extensions/tabs#property-Tab-url). Ich müsste das überprüfen, aber ich dachte auch, dass es mit der 'activeTab'-Berechtigung verfügbar wäre. – Makyen

@Makyen Ich habe 'activeTab' und 'tabs' Erlaubnis gegeben, aber ich bekomme immer noch keine URL und keinen Titel. – Rakeschand

Bitte bearbeiten Sie die Frage zum Thema: Fügen Sie ein [mcve] ein, das das Problem dupliziert. Bei Chrome-Erweiterungen oder Firefox-WebExtensions bedeutet dies fast immer, dass Sie * manifest.json * und einige der Hintergrund-, Inhalts- und/oder Popup-Skripts/HTML einfügen. Fragen, die Debugging-Hilfe suchen ("Warum funktioniert dieser Code nicht so, wie ich will?") Muss Folgendes enthalten: (1) das gewünschte Verhalten, (2) ein spezifisches Problem oder einen Fehler und (3) den kürzesten Code, der für die Reproduktion erforderlich ist * in der Frage selbst *. Bitte beachten Sie auch: [Was kann ich hier fragen?] (Http://stackoverflow.com/help/on-topic) und [fragen]. – Makyen

Dies ist, wie ich die URL und Titel in Verlängerung bekam

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; 
    } 
    } 
});

umfassen diese Datei auf der Komponente

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

Quelle

2018-02-08 11:53:28 Rakeschand

Chrome-Erweiterung in Angular 2/4

Antwort

Verwandte Themen