顯示火狐WebExtension頁面操作時，頁面加載

我一直在試圖通過閱讀下面的文檔上如何使用WebExtension頁面動作讀了起來：顯示火狐WebExtension頁面操作時，頁面加載

我無法查找如何配置我的擴展程序，以便在加載example.com的頁面時顯示URL欄中的頁面操作按鈕。所有文檔似乎都假定頁面操作圖標已經可見，並顯示如何處理它的點擊。

首先，我想我可以通過清單配置它，但它似乎沒有像內容腳本一樣支持。然後我嘗試從background.js找到一個API調用，但沒有找到任何API。

如何在example.com上顯示我的頁面動作圖標？

來源

2017-09-24 span

https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/pageAction/show？ – melpomene

@melpomene謝謝，似乎我忘記將它添加到我的列表中。我仍然不明白當用戶加載'example.com'時，如何在url欄中顯示我的頁面動作圖標。這些例子顯示了我不想使用的上下文菜單。 – span

圍繞the samples進行挖掘我發現以下內容會偵聽所有選項卡上的頁面加載，並使用清單中配置的彈出窗口來更新圖標。

background.js

/* 
Initialize the page action: set icon and title, then show. 
Only operates on tabs whose URL's protocol is applicable. 
*/ 
function initializePageAction(tab) { 
    if (tab.url.includes("example.com")) { 
    browser.pageAction.show(tab.id); 
    } 
} 


/* 
When first loaded, initialize the page action for all tabs. 
*/ 
var gettingAllTabs = browser.tabs.query({}); 
gettingAllTabs.then((tabs) => { 
    for (let tab of tabs) { 
    initializePageAction(tab); 
    } 
}); 

/* 
Each time a tab is updated, reset the page action for that tab. 
*/ 
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => { 
    initializePageAction(tab); 
});

manifest.json的

"permissions": [ 
    "tabs", 
    "activeTab" 
    ], 

    "content_scripts": [{ 
     "matches": ["*://*.example.com/*"], 
     "js": ["content_scripts/download.js"] 
     } 
    ], 

    "page_action": { 
    "browser_style": true, 
    "default_icon": { 
     "19": "icons/download-19.png", 
     "38": "icons/download-38.png" 
    }, 
    "default_title": "Some title", 
    "default_popup": "popup/popup.html" 
    }, 

    "background": { 
     "scripts": ["background.js"] 
    }

來源

2017-09-24 10:09:08 span

與Firefox 59開始，將會有一個更簡單的解決方案。在manifest.json，只需使用page_action的show_matches屬性：

"page_action": { 
    "show_matches": ["*://*.example.com/*"], 
    ... 
}

來源

2018-01-21 21:45:53

顯示火狐WebExtension頁面操作時，頁面加載

回答

相關問題