Tiện ích mở rộng của Chrome để sửa đổi tập lệnh của trang bao gồm và JS

Question

Tôi làm việc trên thư viện javascript mà khách hàng đưa vào trang web của họ để nhúng tiện ích con giao diện người dùng. Tôi muốn một cách để kiểm tra phiên bản dev của thư viện trực tiếp trên trang web của khách hàng mà không yêu cầu họ thực hiện bất kỳ thay đổi nào đối với mã của họ. Điều này sẽ giúp dễ dàng gỡ lỗi các vấn đề và thử nghiệm các phiên bản mới. Để thực hiện điều này, tôi cần phải thay đổi tập lệnh bao gồm để trỏ đến máy chủ dev của tôi và sau đó ghi đè phương thức load() được gọi trong trang để thêm thông số bổ sung để cho biết máy chủ trỏ đến điều gì khi thực hiện điều khiển từ xa cuộc gọi.

Có vẻ như tôi có thể thêm JS vào trang bằng tiện ích chrome, nhưng tôi không thấy bất kỳ cách nào để sửa đổi trang trước khi trang được tải. Có cái gì tôi đang thiếu, hoặc là phần mở rộng chrome không được phép làm điều này?

Answer 1

Tôi đã thực hiện một số tiền hợp lý cho việc phát triển tiện ích của Chrome và tôi không nghĩ có cách nào để chỉnh sửa nguồn trang trước khi trình duyệt hiển thị. Hai tùy chọn gần nhất là:

• Content scripts cho phép bạn quăng trong hiệp phụ file JavaScript và CSS. Bạn có thể sử dụng các tập lệnh này để viết lại các thẻ tập lệnh hiện có trong trang, nhưng tôi không chắc chắn nó sẽ hoạt động vì bất kỳ thẻ tập lệnh nào hiển thị cho tập lệnh của bạn thông qua DOM đã được tải hoặc đang được tải.

• WebRequest cho phép bạn chiếm quyền điều khiển các yêu cầu HTTP, vì vậy bạn có thể có một phần mở rộng định tuyến lại một yêu cầu cho library.js-library_dev.js.

Giả sử trang web của bạn là www.mysite.com và bạn tiếp tục kịch bản của bạn trong thư mục/js thư mục:

chrome.webRequest.onBeforeRequest.addListener(
    function(details) { 
     if(details.url == "http://www.mysite.com/js/library.js") 
      return {redirectUrl: "http://www.mysite.com/js/library_dev.js" }; 
    }, 
    {urls: ["*://www.mysite.com/*.js"]}, 
    ["blocking"]); 

Nguồn HTML sẽ trông giống nhau, nhưng các tài liệu kéo bằng <script src="library.js"></script> sẽ bây giờ là một tệp khác. Điều này sẽ đạt được những gì bạn muốn.

Answer 2

Bạn có thể quan tâm đến các móc có sẵn trong trình duyệt Opera. Opera đã từng có * very powerful hooks, có sẵn cho cả tệp JavaScript Người dùng (các tệp đơn lẻ, rất dễ viết và triển khai) và Tiện ích mở rộng. Một số trong số này là:

BeforeExternalScript:

Sự kiện này được kích hoạt khi một yếu tố kịch bản với một thuộc tính src là gặp phải. Bạn có thể kiểm tra phần tử, bao gồm thuộc tính src của nó, thay đổi nó, thêm người nghe sự kiện cụ thể hơn vào nó, hoặc hủy bỏ hoàn toàn việc tải nó.

Một mẹo hay là hủy tải, tải tập lệnh bên ngoài trong cuộc gọi AJAX, thực hiện thay thế văn bản trên đó rồi chèn lại vào trang web dưới dạng thẻ tập lệnh hoặc sử dụng eval.

window.opera.defineMagicVariable:

Phương pháp này có thể được sử dụng bởi các JavaScripts tài khoản để ghi đè lên các biến toàn cục được định nghĩa bởi các kịch bản thông thường. Bất kỳ tham chiếu đến tên toàn cầu bị ghi đè sẽ gọi hàm getter và hàm setter được cung cấp.

window.opera.defineMagicFunction:

Phương thức này có thể được sử dụng bởi User JavaScripts để ghi đè các chức năng toàn cầu được xác định bởi tập lệnh thông thường. Bất kỳ lời gọi nào của tên toàn cầu bị ghi đè sẽ gọi thực hiện được cung cấp.

---

*: Opera gần đây đã chuyển sang công cụ Webkit và dường như họ đã xóa một số móc này. Bạn vẫn có thể tìm thấy Opera 12 để tải xuống trên trang web của họ.

Answer 3

Đây không phải là tiện ích của Chrome, nhưng Fiddler có thể thay đổi tập lệnh để trỏ tới máy chủ phát triển của bạn (xem this answer để biết hướng dẫn thiết lập từ tác giả của Fiddler). Ngoài ra, với Fiddler, bạn có thể thiết lập tìm kiếm và thay thế để thêm thông số bổ sung mà bạn cần.

Answer 4

Dưới đây là cách sửa đổi nội dung trước khi nội dung được tải trên trang bằng cách sử dụng API WebRequest. Điều này đòi hỏi nội dung phải được nạp vào một biến chuỗi trước khi trình lắng nghe onBeforeRequest trả về. Ví dụ này là dành cho javascript, nhưng nó sẽ hoạt động tốt như nhau đối với các loại nội dung khác.

chrome.webRequest.onBeforeRequest.addListener(
    function (details) { 
     var javascriptCode = loadSynchronously(details.url); 
     // modify javascriptCode here 
     return { redirectUrl: "data:text/javascript," 
          + encodeURIComponent(javascriptCode) }; 
    }, 
    { urls: ["*://*.example.com/*.js"] }, 
    ["blocking"]); 

loadSynchronously() có thể được triển khai với XMLHttpRequest thông thường. Tải đồng bộ sẽ chặn vòng lặp sự kiện và là deprecated trong XMLHttpRequest, nhưng thật không may là khó tránh khỏi với giải pháp này.