google chrome weschool كيفية الوصول إلى صفحة الويب DOM بدلاً من DOM صفحة ملحق؟



weschool html (1)

كما هو موضح في نظرة عامة على إضافات Chrome: الهندسة المعمارية (التي يجب قراءتها):

إذا كانت إضافتك بحاجة إلى التفاعل مع صفحات الويب ، فستحتاج إلى نص محتوى. برنامج نصي للمحتوى هو بعض JavaScript الذي ينفذ في سياق صفحة تم تحميلها في المتصفح. فكر في نص محتوى كجزء من تلك الصفحة المحملة ، وليس كجزء من الامتداد الذي تم حزمه به (ملحق الأصل).

إن نافذة منبثقة ( browserAction عبارة عن رمز في شريط أدوات Google Chrome الرئيسي على يسار شريط العناوين) هي صفحة HTML أيضًا تحتوي على chrome-extension: // URL ، لذلك إذا كنت تصل إلى DOM ، فستؤثر على صفحتها.
وينطبق الشيء نفسه على صفحة الخلفية / الخيارات.

للوصول إلى / التعامل مع صفحة الويب DOM ، لديك طريقتان:

  1. إما أن تعلن عن نص (برامج) نصية في manifest.json وتستخدم messaging :

    chrome.tabs.sendMessage() من الصفحة الخلفية / المنبثقة إلى المستمع chrome.runtime.onMessage في نص المحتوى المحقون ، والذي سينفذ الإجراءات على صفحة الويب ونقل النتائج عن طريق sendResponse الاتصال sendResponse وفقًا للوثائق (ملاحظة: فقط كائنات JSON-ifiable مثل يتم دعم الأرقام والأوتار والمصفوفات والكائنات البسيطة ، مما يعني عدم وجود عناصر DOM ، وليس الفئات ، وليس الوظائف). في حال احتاج البرنامج النصي للمحتوى إلى بدء الاتصال بصفحة ملحق ، يجب أن يستخدم chrome.runtime.sendMessage() .

  2. أو استخدم واجهة برمجة تطبيقات علامات التبويب لإدخال نص برمجي للمحتوى :
    chrome.tabs.executeScript(tabId, details, callback)

    • permissions المطلوبة: "tabs" و "https://www.example.com/*"
      (أو "<all_urls>" ، "\*://\*/\*" ، "http://\*/\*" ، "https://\*/\*" )

    • الخيار الأفضل ، في حالة التنشيط الواضح للمستخدم ، هو استخدام إذن "activeTab" بدلاً من "tabs" و "<all_urls>" لأنه يستخدم كبديل للعديد من الاستخدامات لـ "<all_urls>" ، ولكنه لا يعرض رسالة تحذير أثناء التثبيت .

    • يمكن استخدام .executeScript() مع وظيفة رد اتصال تتلقى صفيفًا من آخر تعبيرات تم تقييمها في نص المحتوى المحقون ، عنصر واحد لكل إطار int تم حقنه داخل علامة التبويب. يستخدم Chrome JSON.stringify() JSON.parse() و JSON.stringify() في النتائج داخليًا ، مما يؤدي إلى تقييد الأنواع المدعومة إلى كائنات عادية وقيم JSON.stringify() مثل الرقم / السلسلة ، أو المصفوفات.
      لذا فهو لا يعمل مع عناصر DOM ، وظائفها ، خصائصها المخصصة ، getters / setters: ستحتاج إلى تعيين / استخراج البيانات المطلوبة يدويًا وتمريرها في مصفوفة / كائن بسيط.

يتم تنفيذ النصوص البرمجية للمحتوى في بيئة خاصة تسمى عالمًا معزولًا. لديهم حق الوصول إلى DOM الصفحة التي يتم حقنها ، ولكن ليس إلى أي متغيرات أو وظائف جافا سكريبت تم إنشاؤها بواسطة الصفحة. ينظر إلى كل نص محتوى كما لو أنه لا يوجد جافا سكريبت أخرى تنفذ على الصفحة التي تعمل عليها. وينطبق الشيء نفسه على العكس: لا يمكن أن يعمل جافا سكريبت في الصفحة على استدعاء أي وظائف أو الوصول إلى أي متغيرات محددة بواسطة النصوص البرمجية للمحتوى.

لا يزال من الممكن الوصول إلى مستوى أعمق والوصول إلى متغيرات / وظائف جافا سكريبت لصفحة الويب .

كمثال على الطريقة الثانية ، لنظهر ذلك div عند النقر على إجراء متصفح.
سنستخدم chrome.tabs.executeScript() في معالج النقر في browserAction لحقن ملف نصي للمحتوى (أو سلسلة التعليمات الحرفية الحرفية إذا كان صغيرًا ، راجع وثائق الطريقة) إلى DOM لهذه الصفحة.

var someVar = {text: 'test', foo: 1, bar: false};
chrome.tabs.executeScript({
    code: '(' + function(params) {
        document.body.insertAdjacentHTML('beforeend',
            '<div style="all:unset; position:fixed; left:0; top:0; right:0; bottom:0;' +
                'background-color:rgba(0,255,0,0.3)">' + params.text + '</div>'
        );
        return {success: true, html: document.body.innerHTML};
    } + ')(' + JSON.stringify(someVar) + ');'
}, function(results) {
    console.log(results[0]);
});

كما ترى ، استخدمنا التحويل التلقائي للشفرة للشفرة الوظيفية لتتمكن من كتابة الشفرة المحقونة كجافا سكريبت عادي مع تمييز وتصفيق لغوي. العيب الواضح هو أن المستعرض يضيع الوقت في تحليل الشفرة ، ولكن عادة ما يكون أقل من 1 ملي ثانية ، وبالتالي لا يكاد يذكر.

أنا اكتب إضافة Chrome وأحاول تراكب <div> على صفحة الويب الحالية بمجرد النقر على زر في ملف popup.html.

عند الوصول إلى طريقة document.body.insertBefore من داخل popup.html ، يتم تراكبها على <div> في النافذة المنبثقة ، بدلاً من صفحة الويب الحالية.

هل يتعين علي استخدام المراسلة بين background.html و popup.html للوصول إلى DOM الخاص بصفحة الويب؟ أود القيام بكل شيء في popup.html ، واستخدام jQuery أيضًا ، إذا كان ذلك ممكنًا.