如何讓Chrome擴展PageAction圖標出現在地址欄中？

Question

我試圖構建一個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腳本：

chrome.browserAction.onClicked.addListener(function(Tab) { 

    $("*").attr("contenteditable",true); 

}); 

這是我的一個擴展的第一次嘗試，所以它很可能是一個新手的錯誤，但我我真的很感謝任何幫助或建議！

Answer 1

好了，原來我需要使用chrome.pageAction.show(tab.id);，這意味着我需要獲得當前的標籤，這與取得的ID：

chrome.tabs.getSelected(null, function(tab) { 

    chrome.pageAction.show(tab.id); 


}); 

但事實證明，你不能使用內容腳本中的chrome.tabs，所以我不得不切換到使用背景頁面。

Answer 2

My answer to this other question給出瞭解決方案。僅供參考，在答案中提到的第二個代碼問題也與您的代碼相關：您希望圖標針對所有頁面顯示，因此您應該使用browser_action而不是page_action。兩者都可以工作，但是在每個頁面上使用頁面操作都違背約定，並且會導致不太一致的最終用戶體驗。

Answer 3

我這樣做：

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

Answer 4

我也有類似的問題，這裏有我跟着來解決這個問題的步驟：

我改變了我的manifest.json包括以下內容：

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

然後我將下面的代碼插入到我的後臺腳本中：

// 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's page action. 
      actions: [ new chrome.declarativeContent.ShowPageAction() ] 
      } 
     ]); 
     }); 
    }); 

這方面的文檔可以在這裏找到... https://developer.chrome.com/extensions/declarativeContent

Answer 5

這是不再可能爲最後釋放。

Chrome extension page action appearing outside of address bar

https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ