Jak zmienić CSS wybranego tekstu za pomocą rozszerzenia Google Chrome

Question

Tworzę rozszerzenie przeglądarki Chrome, która używa kontekstMenu, aby zmienić CSS zaznaczonego tekstu.

Nie mogę jednak uzyskać dostępu do struktury HTML, tj. Węzła nadrzędnego zaznaczonego tekstu, ponieważ w tym przykładzie mogę to zrobić bardzo łatwo.

var selection = window.getSelection(); 

Jeśli jest używany domyślnie w przeglądarce, to zwraca węzeł nadrzędny wybranego tekstu, którego mogę użyć do zmiany CSS później.

Jak zaimplementować to za pomocą rozszerzenia przeglądarki Chrome?

Answer 1

Od tego Chrome nie pozwala na interakcję z elementem wybrałeś za pomocą menu kontekstowego, trzeba stworzyć content script który przechowuje ostatni element, który został kliknięty na prawej stronie, więc kiedy użytkownik kliknie dowolny element prawym przyciskiem myszy, będziesz mógł z niego korzystać.

Najpierw trzeba stworzyć save_last_element.js treści skryptu, tak:

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

Wtedy będziesz dodawać go w 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 
    } 
] 

Teraz, gdy wstrzyknięcie skryptu na stronie , będziesz mógł używać zmiennych LAST_SELECTION i LAST_ELEMENT, aby odwoływać się do ostatniego kliknięcia prawym przyciskiem myszy i edytować jego CSS lub cokolwiek chcesz.

w twojej background.js należy zrobić coś takiego:

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

i wreszcie, wewnątrz pliku 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 
}