Cách thay đổi CSS của văn bản đã chọn bằng cách sử dụng Google Chrome Extension

Question

Tôi đang tạo tiện ích cho trình duyệt Chrome sử dụng contextMenus để thay đổi CSS của văn bản đã chọn.

Nhưng tôi không thể truy cập cấu trúc HTML tức là parentNode của văn bản đã chọn vì tôi có thể thực hiện rất dễ dàng trong ví dụ này.

var selection = window.getSelection(); 

Nếu được sử dụng mặc định trong trình duyệt, điều này sẽ trả về parentNode của văn bản đã chọn mà tôi có thể sử dụng để thay đổi CSS sau này.

Cách triển khai tính năng này bằng Tiện ích mở rộng trình duyệt Chrome?

Answer 1

Vì Chrome không cho phép bạn tương tác với phần tử bạn đã nhấp vào bằng menu ngữ cảnh, bạn phải tạo một content script lưu trữ phần tử cuối cùng đã được nhấp chuột phải trên trang, vì vậy khi người dùng nhấp chuột phải vào bất kỳ phần tử nào, bạn sẽ có thể sử dụng nó.

Trước tiên, bạn phải tạo một kịch bản nội dung save_last_element.js, như thế này:

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

Sau đó, bạn sẽ thêm nó vào manifest.json của bạn:

"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 
    } 
] 

Bây giờ, khi tiêm một kịch bản trong trang , bạn sẽ có thể sử dụng các biến số LAST_SELECTION và LAST_ELEMENT để tham khảo phần tử được nhấp chuột phải cuối cùng và chỉnh sửa CSS của nó hoặc bất kỳ thứ gì bạn muốn.

Trong bạn background.js bạn nên làm một cái gì đó như thế này:

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

Và cuối cùng, bên trong tập tin script.js của bạn:

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 
}