RequireJS trong tiện ích mở rộng của Chrome

Question

Tôi đang xây dựng tiện ích mở rộng của Chrome để thêm một số bài viết JavaScript vào Wikipedia. Theo như tôi biết, cách duy nhất để sử dụng RequireJS là thêm dòng

<script data-main="scripts/bla" src="scripts/require-jquery.js> 

Tuy nhiên, trong tiện ích mở rộng của Chrome, tôi không có quyền truy cập vào HTML để thêm dòng này. Bất kỳ đề xuất?

Answer 1

Bạn có quyền truy cập vào DOM của trang từ Tiện ích mở rộng của Chrome qua content script, tuy nhiên tập lệnh nội dung sẽ chỉ có quyền truy cập vào các đối tượng JavaScript được tạo bởi chính số content script.

Có nhiều cách để bao gồm tập lệnh từ tiện ích mở rộng của Chrome, cách bạn đưa mã vào sẽ dựa trên những gì bạn định làm với nó.

Nếu bạn muốn nó trong trang popup của browser hoặc page action bạn có thể bao gồm nó từ tệp kê khai dưới dạng tập lệnh nội dung hoặc tham chiếu nó bằng cách sử dụng thẻ tập lệnh trong popup.html từ tài nguyên tương đối trong plugin của bạn.

Từ manifest:

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["jquery.js", "myscript.js"] 
    } 
    ], 
    ... 
} 

Từ popup.html:

<script data-main="scripts/bla" src="scripts/require-jquery.js> 

Nếu bạn muốn nó trong background page bạn có thể tham khảo nó từ trang nền sử dụng một thẻ script từ một nguồn lực tương đối trong plugin của bạn.

Từ background.html

<script data-main="scripts/bla" src="scripts/require-jquery.js> 

Nếu bạn muốn nó được đưa vào trang trình duyệt riêng của mình thì bạn cần phải sử dụng tiêm kịch bản động trên DOM của trang. Bạn có quyền truy cập vào DOM của trang từ một số content script. Xin lưu ý rằng nếu bạn tải JavaScript bằng cách sử dụng kỹ thuật này, bạn plugin JavaScript (từ trang nền, tập lệnh nội dung hoặc tập lệnh bật lên) sẽ không có quyền truy cập vào nó.

Bạn có thể tải requirejs từ tiện ích của mình bằng cách sử dụng phương thức chrome.extension.getURL hoặc từ vị trí được lưu trữ trên internet.

var script = document.createElement('script'); 
script.setAttribute("type", "text/javascript"); 
script.setAttribute("async", true); 
script.setAttribute("src", chrome.extension.getURL("require-jquery.js")); 
//Assuming your host supports both http and https 
var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; 
head.insertBefore(script, head.firstChild) 

Answer 2

đây là cách bạn có thể thực hiện trong trang nền.

Trong file manifest:

"background": { 
    "scripts": [ "scripts/require.js","scripts/main.js"] 
    }, 

Trong main.js:

require.config({ 
     baseUrl: "scripts" 
    }); 

    require([ /*...*/ ], function( /*...*/) { 
     /*...*/ 

    }); 

Thay vì điều này:

<script data-main="scripts/bla" src="scripts/require.js> </script> 

Bạn sẽ sử dụng này:

<script src="scripts/require-jquery.js ></script> 
<script src="scripts/main.js > </script> 

See this question: Using Require.js without data-main

Bạn cũng có thể làm điều đó trong trang nội dung bằng ý tưởng này.

Câu hỏi hay bằng cách này.Tôi thích câu trả lời là Adam Ayres's.

Answer 3

Để sử dụng nó trong một kịch bản nội dung bạn chỉ có thể bao gồm nó trong manifest.json như bạn đầu tiên phụ thuộc:

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["requirejs.js", "myscript.js"] 
    } 
    ], 
    ... 
} 

Nó sẽ KHÔNG gây ô nhiễm không gian tên toàn cầu (cửa sổ) để không phải lo lắng về điều đó; chỉ có sẵn cho các tập lệnh mở rộng. Cũng trong manifest.json bạn phải đặt tên cho các tệp mà requirejs có thể sử dụng bằng cách đặt tên chúng là "web_accessible_resources", để làm cho việc này dễ dàng đặt tất cả chúng vào một thư mục (ví dụ: js /) để bạn có thể sử dụng wildcard:

{ 
    "name": "My extension", 
    ... 
    "web_accessible_resources": [ 
    "js/*" 
    ], 
    ... 
} 

Và sau đó trong kịch bản của bạn (ví dụ myscript.js) để sử dụng requirejs chỉ yêu cầu các phụ thuộc sử dụng chrome.extension.getURL, như thế này:

requirejs([chrome.extension.getURL('js/library')], function(library) { 
    ... 
} 

Answer 4

EDIT dưới đây vẫn còn đúng cho vani đồng bằng yêu cầu .js, nhưng tìm thấy cách giải quyết bằng cách yêu cầu RequireJS

Github: https://github.com/jeroendelau/requirejs
Bower: Chòi chơi cho cài đặt requirejs-cho plug-in mở rộng

orignal POST

Tiêm nó thành kịch bản nội dung đến nay là khó khăn nhất. Và các câu trả lời ở trên không đầy đủ hoặc không chính xác.

Bối cảnh và Popup:
Go với câu trả lời trước đó của @nafis, họ sẽ làm việc

Content Script
Đây là một trong rất khôn lanh, và phần này từ api description là chìa khóa:

Execution environment
Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

Cách trực quan này phải chính xác
manifest.json

{ 
    "name": "My extension", 
    ... 
    "content_scripts": [ 
    { 
     "matches": ["http://www.google.com/*"], 
     "css": ["mystyles.css"], 
     "js": ["requirejs.js", "myscript.js"] 
    } 
    ], 
    ... 
    "web_accessible_resources": [ 
    "js/*" 
    ], 
... 
} 

myscript.js

require(["myFancyModule"], function (FM) { 
    ... 
}); 

này sẽ không hoạt

Vấn đề là requirejs sẽ tiến hành tải tất cả phụ thuộc của bạn bằng cách tiêm <script> thẻ trong tiêu đề. Các thẻ tập lệnh này được thực hiện trong môi trường PAGE, không phải trong môi trường EXTENSION đặc biệt. Và điều này quan trọng.

1. Dependencies không tải từ requirejs không được tải trong trang môi trường
2. Nếu chủ sở hữu trang web đã alreay thêm requirejs, nó migh xung đột
3. Bạn có thể quyết định tiêm require.js vào trang, như @Adam gợi ý, nhưng trong trường hợp đó, không có tính năng tiện ích mở rộng nào của bạn sẽ hoạt động.lưu trữ, nhắn tin, yêu cầu qua nhiều trang web không phải là có sẵn

Vì vậy, để những người làm việc, các mô-đun được tải bởi requirejs cần phải được đưa vào môi trường tiện ích mở rộng. Có thể sử dụng plugin requirejs để thay đổi hành vi tải.

Do cách làm việc này là giải pháp rất thanh nha, VÀ nó ngăn cản bạn từ khi nhìn thấy các script trong trình gỡ lỗi dưới kịch bản. Nhưng nếu bạn tuyệt vọng, nó sẽ hoạt động.

myscript.js

/** 
* Inject the plugin straight into requirejs 
*/ 
define("Injector", { 
    load: function (name, req, onload, config) { 

    //Load the script using XHR, from background 
    var oReq = new XMLHttpRequest(); 
    oReq.addEventListener("load", function() { 

     //Find depenencies in the script, and prepend the 
     //Injector! plugin, forcing the load to go through this 
     //plugin. 
     var modified = getDeps(oReq.response) 

     //have requirejs load the module from text 
     //it will evaluate the define, and process dependencies 
     onload.fromText(modified); 
    }); 
    oReq.open("GET", req.toUrl(name) + ".js"); 
    oReq.send(); 

    //Find dependencies and prepend Injector! 
    function getDeps(script) 
    { 
     //extract the define call, reduced to a single line 
     var defineCall = script.match(/define([\s\S])*?{/m)[0].split("\n").join(""); 
     //extract dependenceis from the call 
     var depsMatch = defineCall.match(/\[([\s\S]*?)\]/); 

     //if there are dependencies, inject the injectors 
     if (depsMatch) 
     { 
     var deps = depsMatch[0]; 
     var replaced = deps.replace(/(\'|\")([\s\S]*?)\1/g, '$1Injector!$2$1'); 
     return script.replace(/define([\s\S]*?)\[[\s\S]*?\]/m, 'define$1' + replaced); 
     } 
     //no dependencies, return script 
     return script; 
    } 
    } 
}); 

/** 
* Call all your dependencies using the plugin 
*/ 
require(["Injector!myFancyModule"], function (FM) { 
     chrome.storage.local.get({something}); 
});