Question

我正在尝试在通过Chrome扩展程序创建的标签中使用LESS（chrome.tabs.create），但我收到了一个跨域错误（“NETWORK_ERR：XMLHttpRequest异常101”），指的是LESS JavaScript文件。我不清楚如何设置权限。将LESS JavaScript文件添加到“web_accessible_resources”似乎没有帮助。所有其他文件，如css和js文件加载正常。我似乎只从较少的来源中收到此错误。有什么想法吗？

为了解释我的设置，LESS JavaScript文件和.less文件加载在HTML文件中，如下所示：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet/less" href="static/css/main.less">
    <script src="/static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
Whatever... 
</body>
</html>

这个html文件加载在background.js中，如下所示：

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.create({url: 'mypage.html'})
});

清单文件具有“tabs”和“all urls”的权限，并加载background.js。

Answer 1

我不确定你在哪里包含了客户端less.js编译器。另见：http://lesscss.org/#client-side-usage。 Less.js是一个客户端javascript。似乎less.js从其他URL（域）加载而不是main.less文件。这可以通过启用CORS来修复，请参阅：http://enable-cors.org/。在已安装home.less的域上，服务器应发送Access-Control-Allow-Origin：*标头。

less.js使用XMLHttpRequests加载较少的文件，这些文件支持大多数现代浏览器的CORS，请参阅http://caniuse.com/#search=cors。有关详细信息，请访问http://www.html5rocks.com/en/tutorials/cors/

Answer 2

对于开发，请使用本地文件夹中的less.js.

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

for release使用少量编译器，如lessc。

在Chrome扩展程序中使用LESS

2 个答案: