Google क्रोम एक्सटेंशन

Question

का उपयोग कर चयनित टेक्स्ट के सीएसएस को कैसे बदलें I क्रोम ब्राउज़र के लिए एक एक्सटेंशन बना रहा हूं जो चयनित टेक्स्ट के सीएसएस को बदलने के लिए संदर्भ मेनू का उपयोग करता है।

लेकिन मैं चयनित पाठ के HTML संरचना i.e. parentNode तक पहुंचने में सक्षम नहीं हूं क्योंकि मैं इस उदाहरण में बहुत आसानी से कर सकता हूं।

var selection = window.getSelection(); 

तो ब्राउज़र में डिफ़ॉल्ट रूप से इस्तेमाल किया, यह चयनित पाठ है कि मैं बाद में सीएसएस बदलने के लिए उपयोग कर सकते हैं की parentNode देता है।

क्रोम ब्राउज़र एक्सटेंशन का उपयोग करके इसे कैसे कार्यान्वित करें?

Answer 1

कि क्रोम जब से तुम तत्व आप संदर्भ मेनू का उपयोग कर पर क्लिक किया है के साथ बातचीत नहीं करता है, तो आप एक content script कि अंतिम तत्व दायाँ क्लिक किया है पृष्ठ पर किया गया है संग्रहीत करता है बनाने के लिए है, इसलिए जब उपयोगकर्ता किसी भी तत्व पर राइट-क्लिक करता है, आप इसका उपयोग करने में सक्षम होंगे।

सबसे पहले आप, एक save_last_element.js सामग्री स्क्रिप्ट बनाने के लिए इस तरह: अब

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

, जब पेज में एक स्क्रिप्ट इंजेक्शन:

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 में जोड़ देंगे , आप पिछले दाएं क्लिक किए गए तत्व को संदर्भित करने के लिए LAST_SELECTION और LAST_ELEMENT चर का उपयोग करने में सक्षम होंगे और इसके सीएसएस या जो कुछ भी आप चाहते हैं उसे संपादित कर सकेंगे। अपने script.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 
}); 

और अंत में,:

अपने में background.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 
}