Как я могу получить значок расширенной страницы ChromeAction в адресной строке?

Я пытаюсь создать расширение Chrome, которое отображается в виде значка в адресной строке, которое при щелчке устанавливает contenteditable = true для всех элементов на странице, а затем при повторном нажатии возвращает их в contenteditable = false.

Однако я падаю на первое препятствие... Значок даже не отображается в адресной строке.

Здесь мой файл манифеста:

{
 "name": "Caret",
 "version": "1.0",
 "description": "Allows you to edit the content on any webpage",
 "page_action": {
 "default_icon": "icon.png"
 },
 "content_scripts": [
 {
 "matches": ["http://*/*"],
 "js": ["jquery.js", "caret.js"]
 }
 ],
 "permissions" : [
 "tabs"
 ]
}

и здесь caret.js script:

chrome.browserAction.onClicked.addListener(function(Tab) {
 $("*").attr("contenteditable",true);
});

Это моя первая попытка расширения, так что это, скорее всего, ошибка новичка, но я бы очень признателен за любую помощь или совет!

5 ответов

Хорошо, мне нужно использовать chrome.pageAction.show(tab.id);, что означало, что мне нужно было получить идентификатор текущей вкладки, что достигается с помощью:

chrome.tabs.getSelected(null, function(tab) {
 chrome.pageAction.show(tab.id);
});

НО, вы не можете использовать chrome.tabs в контенте script, поэтому мне пришлось переключиться на использование фоновой страницы.


Мой ответ на этот вопрос дает решение. FYI, вторая проблема с кодом, указанная в этом ответе, также имеет отношение к вашему коду: вы хотите, чтобы значок отображался для всех страниц, поэтому вы должны использовать browser_action, а не page_action. Любой из них будет работать, но использование действия на странице на каждой странице идет вразрез с соглашением и делает менее последовательный опыт конечного пользователя.


У меня была аналогичная проблема, вот шаги, которые я выполнил для ее решения:

Я изменил свой manifest.json, включив в него следующее:

{
 "background": { 
 "scripts": ["background.js"], 
 "persistent":false 
 }, 
 "page_action": { 
 "default_icon": "logo.png", 
 "default_title": "onhover title", 
 "default_popup": "popup.html" 
 } 
}

Затем я вставил следующий код в свой фон script:

// When the extension is installed or upgraded ...
 chrome.runtime.onInstalled.addListener(function() {
 // Replace all rules ...
 chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
 // With a new rule ...
 chrome.declarativeContent.onPageChanged.addRules([
 {
 // That fires when on website and has class
 conditions: [
 new chrome.declarativeContent.PageStateMatcher({
 pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
 css: [".cssClass"]
 })
 ],
 // And shows the extension page action.
 actions: [ new chrome.declarativeContent.ShowPageAction() ]
 }
 ]);
 });
 });

Документацию для этого можно найти здесь... https://developer.chrome.com/extensions/declarativeContent


Я сделал это:

chrome.tabs.onUpdated.addListener(function(id, info, tab){
 if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
 chrome.pageAction.show(tab.id);
 }
});

licensed under cc by-sa 3.0 with attribution.