Как изменить CSS выделенного текста с помощью расширения Google Chrome

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 
}