قم بتحميل التطبيق المرجعي تلقائيًا عندما تكون في صفحة الويب كملحق لمتصفح Google Chrome
سؤال
لقد قمت في الأساس بإنشاء تطبيق مرجعي، وأريد تشغيله عند فتح عنوان URL محدد بأحرف بدل.لبعض الأسباب، لن يتم تشغيله ببساطة كجافا سكريبت في امتداد Chrome، وقد سئمت من المحاولة.
ماذا أظن يمكن أن يكون العمل هو إنشاء امتداد يحتوي على ملف content_script
للصفحة (الصفحات) المحددة (والتي تسمح باستخدام حرف البدل عبر match
)، و اجعله بطريقة ما يفعل نفس الشيء الذي سيتم القيام به إذا قام المستخدم بالنقر فوق الإشارة المرجعية في شريط الإشارات المرجعية.
ومع ذلك، أنا لا أعرف كيفية القيام بذلك.
شيء واحد يجب ملاحظته هو أن أحتاجه للوصول إلى النطاق العالمي للصفحة, ، أي الخروج من صندوق الحماية الممتد (وهو أمر ممكن، و تم التاكيد ليكون ممكنًا حسب التصميم في أداة تعقب الأخطاء في Chromium).
لذا فإن السؤال مرة أخرى هو: كيف، من content_script
, ، هل أقوم "بتحميل التطبيق المختصر" (بمعنى آخر، كيفية تحويل bookmarklet إلى ملحق Google Chrome).لدي في جافا سكريبت عادي أيضا، إذا كان من الممكن أن يكون مفيدا.
هذا هو التطبيق المختصر، في حال أراد شخص ما اختباره.من المفترض أن تستخدم في my.deviantart.com/messages/*
(لكنك تحتاج إلى حساب ورسائل في صندوق الوارد الخاص بك، لرؤية التأثير يحوم فوق رابط "الانحراف"، وسيظهر تلميح أداة مع صورة مصغرة له).
(يحرر: وهنا محاولة تمديد, ، نشرت في تعليقات الإجابة)
المحلول
يمكنك إجراء مكالمات عبر النطاقات من البرنامج النصي للمحتوى إذا قمت بوضع عنوان url في جزء الأذونات من البيان الخاص بك...
http://code.google.com/chrome/extensions/xhr.html
ما بدا أنه خانق هو رد الاتصال الذي وضعته في عنوان URL للطلب ولم يكن هناك حاجة لذلك، لذا قمت بإزالته.
إليك نسخة صالحة للعمل من الكود الخاص بك....
يظهر
{
"name": "dA Tooltip Thumbnail",
"version": "1.0.0",
"description": "What the name says.",
"permissions": [
"http://backend.deviantart.com/*"
],
"icons": {
"48" : "sample-48.png",
"128" : "sample-128.png"
},
"content_scripts": [
{
"matches": ["http://my.deviantart.com/messages/*"],
"js" : ["jquery-1.7.1.min.js","contentscript.js"]
}
]
}
محتوى
$(".mcb-title a:first-child").each(function() {
var b=$(this).attr("href");
null!=b.match(/https?:\/\/fav\.me\/.*|https?:\/\/.*\.deviantart\.com\/art.*/)&&"true"!=$(this).attr("da-message-preview-attached")&&$.getJSON("http://backend.deviantart.com/oembed?url="+encodeURIComponent(b),$.proxy(function(b) {
$(this).addClass("da-message-preview").attr("rel",b.thumbnail_url).attr("da-message-preview-attached","true");
$(this).hover(function(a) {
window.daMessagePreviewTitle=this.title;
this.title="";
$("body").append('<p id="da-message-preview"><img src="'+this.rel+'"/></p>');
$("#da-message-preview").css( {top:a.pageY-10+"px",left:a.pageX+30+"px",position:"absolute",border:"1px solid #666",background:"#EEE",padding:"5px",display:"none","-webkit-border-radius":"6px","-moz-border-radius":"6px","border-radius":"6px","-webkit-box-shadow":"0px 2px 8px #000","-moz-box-shadow":"0px 2px 8px #000","box-shadow":"0px 2px 8px #000","z-index":"123456"}).fadeIn("fast")
},function() {
$("#da-message-preview").remove()
});
$(this).mousemove(function(a) {
$("#da-message-preview").css("top",a.pageY-10+"px").css("left",a.pageX+30+"px")
})
},this))
});
الخطأ الوحيد الذي لاحظته بعد التغييرات هو محاولة الحصول على عنوان url الذي يحصل على 404...
http://backend.deviantart.com/oembed?url=http%3A%2F%2Fnews.deviantart.com%2Farticle%2F143885%2F
...خطأ صغير، سأترك الأمر لك للتخلص منه ;).
أوه، وأخرجت أشياء الموقت، هل هذا مطلوب حقًا؟ألن تنتقل إلى عنوان URL مختلف عندما تنقر على معرض ما؟... لأنه إذا قمت بذلك، فسيتم إعادة إدخال النص البرمجي للمحتوى (قد تحتاج إلى إضافة المزيد من التطابقات لذلك، رغم أنك لم تنظر حقًا).
نصائح أخرى
أعتقد أن ما تبحث عنه هو Message Passing
:
http://code.google.com/chrome/extensions/messaging.html
من خلاله يمكنك تمرير الأحداث من content_script إلى البرنامج النصي الموجود في الخلفية.ضمن صفحة الخلفية، ستتوفر لديك جميع إمكانيات ملحق Chrome تحت تصرفك.
لا يوجد أي عمل مطلوب تقريبًا للتحويل من تطبيق مرجعي إلى ملحق Chrome (شريطة أن يصل التطبيق المختصر إلى عناصر DOM فقط - وهو المعيار الذي يبدو أن ملحقك يتوافق معه).ما عليك سوى لصق JavaScript في ملحقك content_script.js
.
لكن لاحظ أن تطبيقك المختصر يستخدم jQuery.سيتعين عليك تضمين ذلك في البرنامج النصي للمحتوى الخاص بك أيضًا. انظر هنا لكيفية القيام بذلك.
ملاحظة أخرى.لا تحتاج إلى استغلال أي نوع من الأخطاء من أجل "اختراق" الامتداد؛حسب التصميم، يُسمح لإضافات Chrome بالوصول إلى عناصر DOM الخاصة بالصفحة، ولكن لا يُسمح لها بأي شيء آخر داخل مساحة اسم JavaScript.بمعنى آخر، إذا قامت الصفحة بتحميل بعض المتغيرات السرية للغاية var bob = 'My secret!!!1'
, ، لم يتمكن ملحقك من الوصول bob
وقراءة قيمته.ومن ناحية أخرى، إذا bob
تم تحميل قيمة span
يمكن لامتدادك العثور على هذه العلامة وقراءتها، نظرًا لأنها جزء من DOM.