15

Tình huống: Tôi đang viết tiện ích mở rộng chrome hoạt động trên bất kỳ trang nào.Tại sao jQuery không tải trong Facebook?

Câu hỏi vấn đề: Tôi không thể tải jQuery vào Facebook và tôi muốn hiểu điều gì đang xảy ra.

Hypotheses: Facebook sở hữu một số công nghệ siêu cao cấp mà bằng cách nào đó phát hiện cả hai:

  1. Khi jQuery được nạp thông qua một phần mở rộng chrome trong một riêng biệt JSVM bối cảnh vẻ thực hiện, Facebook Megamind bằng cách nào đó biết về điều này có vẻ bề ngoài riêng biệt Thực thi JSVM ngữ cảnh và chặn nó.
  2. rằng jQuery được nạp qua script.src và khối nó (khi tôi sử dụng CDN Google phục vụ qua HTTPS thay vì jQuery một mà không phương pháp 2 công trình, nhưng không đủ để câu trả lời).

DỮ LIỆU

Làm sao tôi biết jQuery không tải?

tôi j để đưa lên console trong Chrome. Khi tôi làm:

> jQuery 
    >> ReferenceError : jQuery is not defined. 
    > $('body') 
    >> Error : Tried to get element "body" but it is not present on the page. 

Làm thế nào để tôi cố gắng để tải jQuery trong facebook?

Phương pháp 1 (bắt buộc nhưng thất bại):

Qua đoạn mã sau vào file manifest.json:

"content_scripts"   : [ 
            { 
            "matches" : ["<all_urls>"], 
            "js"  : [ 
                "javascript/jq/jquery-1.9.1.min.js",            
                "javascript/jq/non-standard.js" 
                ], 
            "all_frames": true // (or false, same failure) 
            } 
           ] 

Phương pháp 2 (công trình, nhưng insufficent):

Thông qua phương pháp được mô tả trong câu trả lời SO này (load jQuery into console), được sửa đổi để cho phép giao thức chính xác:

var jq = document.createElement('script'); 
    jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"; 
    document.getElementsByTagName('head')[0].appendChild(jq); 
    jQuery.noConflict(); 

Tóm tắt

Giả thuyết 1 có vẻ rất khó xảy ra, bởi vì quá cưỡi bối cảnh thực hiện riêng biệt của một trình duyệt web sẽ là một lỗ hổng bảo mật lớn (phá vỡ sandbox đó), và không có khả năng bị xử phạt. Vì vậy, tôi có lẽ đang hoang tưởng và nhìn thấy rõ ràng, mà hy vọng một trong các bạn sẽ thấy.

Phụ lục (mã khác có liên quan)

Tất cả phi standard.js:

$.fn.in_groups_of = function(countPerGroup) { 
     var groups = [], offset = 0, $group; 
     while (($group = this.slice(offset, (countPerGroup + offset))).length) { 
      groups.push($group); 
      offset += countPerGroup; 
     } 
     return groups; 
    }; 

More của manifest.json:

"manifest_version"  : 2, 
"permissions"    : [ 
            "http://*/", 
            "https://*/", 
            "tabs", 
            "storage", 
            "unlimitedStorage" 
           ], 
+0

Vì vậy, tiện ích mở rộng của bạn đang hoạt động trên bất kỳ trang web nào khác ngoài Facebook? –

+1

@SimonBoudrias Câu hỏi hay. Thực ra là không. Tôi chỉ kiểm tra trên Stackoverflow (nhưng có vẻ như họ tải jQuery của riêng mình, vì vậy tôi nhận được một dương tính giả). Tiện ích của tôi cũng không hoạt động trên Google. Điểm tốt! Có lẽ tôi cần phải thay đổi tiêu đề của câu hỏi, mặc dù điều đó có thể quá mất tập trung. –

+3

Đó là chức năng $ mà họ thực hiện rất buồn cười, nó chỉ giả vờ như nó làm một cái gì đó nhưng thực sự nó chỉ là một thông báo lỗi lừa dối. Có lẽ họ đang cố gắng để đám đông người cố gắng đào sâu vào lòng can đảm của facebook. – brysgo

Trả lời

43

Bảng điều khiển Chrome dường như không có quyền truy cập vào ngữ cảnh thực thi của tập lệnh nội dung.

Sai, đúng vậy. Bạn cần phải nhìn vào địa điểm chính xác:

Animation of how-to get access to the execution environment of the Chromne extension

Các hình màn ảnh trước đó cho thấy tab Console trong những công cụ nhà phát triển Chrome có hai hộp thả xuống ở phía dưới, có thể được sử dụng để thay đổi môi trường thực thi cho bảng điều khiển của công cụ dành cho nhà phát triển.
Phía bên trái có thể được sử dụng để thay đổi bối cảnh khung (khung trên cùng, vì vậy khung nội tuyến, ...) và bên phải có thể được sử dụng để thay đổi ngữ cảnh tập lệnh (trang, tập lệnh nội dung, ...).

+4

Đó là câu trả lời tuyệt vời nhất mà tôi từng thấy. Nó cần phải được upvoted 10.000 lần cho gif động trên chủ đề mà hoàn toàn trả lời câu hỏi và dạy tôi như 5 điều mới. Làm thế nào bạn làm điều đó gif? –

+3

@CrisStringfellow Tôi đang sử dụng Byzanz. Xem [câu trả lời này trên Ask Ubuntu] (http://askubuntu.com/a/201018/45058) cho kịch bản lệnh shell của tôi khởi chạy công cụ này. GIF được tạo có chất lượng và kích thước hợp lý. Ví dụ: hãy xem [hoạt ảnh này] (https://rob.lekensteyn.nl/youtubelyrics/screenshots/40seconds.gif). Nó có thời lượng 40 giây và * chỉ * 3.7Mb. –

2

Câu trả lời

Có vẻ như 'phương pháp thử nghiệm' của tôi bị thiếu sót. Giả định về omniscience của giao diện điều khiển của Chrome là không chính xác. Bảng điều khiển Chrome dường như không có quyền truy cập vào ngữ cảnh thực thi của tập lệnh nội dung. Vì vậy, mặc dù giao diện điều khiển đã báo cáo rằng jQuery không có quyền truy cập vào trang, nó thực sự đã làm, từ ngữ cảnh thực thi của tập lệnh nội dung.

này đã được xác minh bằng cách thêm một kịch bản nội dung, test.js, để manifest.json:

"content_scripts"   : [ 
            { 
            "matches" : ["<all_urls>"], 
            "js"  : [ 
                "javascript/jq/jquery-1.9.1.min.js", 
                "javascript/jq/non-standard.js", 
                "javascript/test.js" // <-- add 
                ], 

Nội dung của test.js là:

var jtest = $('body'); 
    alert(jtest); 
    alert(jtest.text()); 

Bây giờ bất cứ trang tôi hướng đến , hai hộp cảnh báo bật lên như mong đợi.

Nó hoạt động!

0

Bạn có thể biết tất cả những điều này ngay bây giờ, nhưng tôi nghĩ ai đó vẫn thấy những thông tin này hữu ích.

Trong một phần mở rộng Chrome,

Bạn có một số "thế giới của kịch bản":

  • script trang gốc: các kịch bản trên trang riêng của mình.
  • Kịch bản nội dung: bạn viết các tập lệnh đó và chạy trên trang
  • Tập lệnh bật lên: chúng chạy trên cửa sổ bật lên, nếu bạn có một trang bật lên.
  • Tập lệnh nền: chạy trên trang nền chung.

Google thực hiện công việc tuyệt vời về tài liệu, vì vậy, rất nhiều tài liệu về tất cả các tập lệnh đó https://developer.chrome.com/extensions. Tuy nhiên, trong trường hợp của bạn, chỉ cần lưu ý rằng: tập lệnh trang và tập lệnh nội dung trực tiếp trong thế giới riêng biệt, chúng chia sẻ DOM và một số đối tượng gốc của Chrome, nhưng chúng không chia sẻ biến (hoặc đối tượng) mà chúng tạo.

Đối với trường hợp này, nếu bạn có jQuery trong các tập lệnh nội dung, bạn sẽ có $ và jQuery sẵn sàng để sử dụng trong các tập lệnh nội dung của bạn. Bạn có thể sử dụng nó để truy vấn DOM (mặc dù một số sự kiện jQuery có thể không hoạt động như mong đợi). Nhưng trên trang, bạn sẽ không có $ và jQuery, (bạn có thể có $, nhưng nó không phải là jQuery ^^).

Phương pháp 2 ở trên, nó thực sự đưa jQuery vào trang, jQuery sẽ trở thành tập lệnh trang. Và bạn không thể sử dụng $ hoặc jQuery trong các tập lệnh nội dung của bạn.

Nếu bạn sử dụng cả hai phương pháp cùng một lúc, bạn có thể có jQuery 1 trong kịch bản trang của bạn và jQuery 2 trong tập lệnh nội dung của bạn và chúng là 2 phiên bản jQuery khác nhau. Nó có thể gây nhầm lẫn, nhưng tôi làm tất cả các lần.

Các vấn đề liên quan