如何使用Google Chrome擴展程序更改選定文本的CSS

Question

我對Chrome瀏覽器進行了擴展，該瀏覽器使用contextMenus更改所選文本的CSS。

但我無法訪問所選文本的HTML結構，即parentNode，因爲在此示例中我可以非常輕鬆地進行操作。

var selection = window.getSelection(); 

如果在瀏覽器中默認使用，則會返回所選文本的parentNode，以供稍後更改CSS。

如何使用Chrome瀏覽器擴展實現此功能？

Answer 1

自認爲Chrome瀏覽器不會讓你跟你點擊了使用上下文菜單要素互動，你必須創建一個content script存儲已右鍵點擊頁面上的最後一個元素，所以當用戶右鍵單擊任何元素，您就可以使用它。

首先，你必須創建一個save_last_element.js內容腳本，像這樣：

var LAST_SELECTION, 
    LAST_ELEMENT; 

document.body.addEventListener('contextmenu', function(e) { 
    LAST_SELECTION = window.getSelection(); 
    LAST_ELEMENT = e.target; 
    // this will update your last element every time you right click on some element in the page 
}, false); 

然後你會在你的manifest.json添加：

"permissions": ["*://*/*"], // don't forget to set the permissions for all the pages 

"content_scripts": [ 
    { 
     "matches": ["*://*/*"], 
     "js": ["/path/to/save_last_element.js"], 
     "run_at": "document_idle", 
     "all_frames": true 
    } 
] 

現在，在頁面注入腳本時，您可以使用LAST_SELECTION和LAST_ELEMENT變量來引用最後一次右鍵單擊的元素並編輯其CSS或任何您想要的。

在你background.js你應該做這樣的事情：

function handler(info, tab) { 
    // here you can inject a script inside the page to do what you want 
    chrome.tabs.executeScript(tab.id, {file: '/path/to/script.js', all_frames: true}); 
} 

var myContextMenuItem = chrome.contextMenus.create({ 
    "title": "Some title", 
    "contexts": ["all"], 
    "documentUrlPatterns": ["*://*/*"], 
    "onclick": handler 
}); 

最後，你script.js文件中：

if (LAST_SELECTION) { 
    // do whatever you want with the information contained in the selection object 
} 
if (LAST_ELEMENT) { 
    // do whatever you want with the element that has been right-clicked 
}