liangsheng8708
/
ruffle
mirror of https://mirror.ghproxy.com/https://github.com/ruffle-rs/ruffle.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

web: Prototype direct SWFs

This commit is contained in:
relrelb 2021-03-01 23:12:49 +02:00 committed by Mike Welsh
parent d336926e3f
commit 54604c1be1
6 changed files with 108 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/packages/extension/assets/css/player.css Normal file
View File

@ -0,0 +1,9 @@
#player {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: auto;
height: auto;
}

14
web/packages/extension/assets/player.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ruffle</title>
<link rel="stylesheet" href="css/player.css" />
</head>
<body>
<div id="main"></div>
<script src="dist/player.js"></script>
</body>
</html>

15
web/packages/extension/manifest.json
View File

@ -10,6 +10,10 @@
"default_popup": "popup.html",
"browser_style": true
},
"background": {
"scripts": ["dist/background.js"],
"persistent": true
},
"content_scripts": [
{
"matches": ["<all_urls>"],
@ -18,7 +22,7 @@
"run_at": "document_start"
}
],
"content_security_policy": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'unsafe-inline';",
"content_security_policy": "default-src 'self'; script-src 'self' 'unsafe-eval'; style-src 'unsafe-inline'; connect-src *;",
"icons": {
"16": "images/icon16.png",
"32": "images/icon32.png",
@ -30,6 +34,11 @@
"page": "options.html",
"open_in_tab": true
},
"permissions": ["storage"],
"web_accessible_resources": ["dist/*"]
"permissions": [
"storage",
"<all_urls>",
"webRequest",
"webRequestBlocking"
],
"web_accessible_resources": ["*"]
}

39
web/packages/extension/src/background.js Normal file
View File

@ -0,0 +1,39 @@
function isSwf(details) {
const typeHeader = details.responseHeaders.find(({name}) => name.toLowerCase() === "content-type");
if (!typeHeader) {
return false;
}
const mime = typeHeader.value.toLowerCase().match(/^\s*(.*?)\s*(?:;.*)?$/)[1];
// Some sites (e.g. swfchan.net) might (wrongly?) send octet-stream, so check file extension too.
if (mime === "application/octet-stream") {
const url = new URL(details.url);
const extension = url.pathname.substring(url.pathname.lastIndexOf("."));
return extension.toLowerCase() === ".swf";
}
return mime === "application/x-shockwave-flash";
}
function onHeadersReceived(details) {
if (!isSwf(details)) {
return;
}
const baseUrl = chrome.runtime.getURL("player.html");
return { redirectUrl: `${baseUrl}?url=${details.url}` };
}
// TODO: Support Firefox.
// TODO: Only if configured.
chrome.webRequest.onHeadersReceived.addListener(
onHeadersReceived,
{
urls: ["<all_urls>"],
types: ["main_frame"],
},
["blocking", "responseHeaders"]
);
// TODO: chrome.webRequest.onHeadersReceived.removeListener(onHeadersReceived);

32
web/packages/extension/src/player.js Normal file
View File

@ -0,0 +1,32 @@
import { PublicAPI, SourceAPI, publicPath } from "ruffle-core";
let ruffle;
let player;
// Default config used by the player.
const config = {
letterbox: "on",
logLevel: "warn",
};
window.RufflePlayer = PublicAPI.negotiate(
window.RufflePlayer,
"local",
new SourceAPI("local")
);
__webpack_public_path__ = publicPath(window.RufflePlayer.config, "local");
window.addEventListener("DOMContentLoaded", () => {
const url = new URL(window.location);
const swfUrl = url.searchParams.get("url");
if (!swfUrl) {
return;
}
ruffle = window.RufflePlayer.newest();
player = ruffle.createPlayer();
player.id = "player";
document.getElementById("main").append(player);
player.load({ url: swfUrl, ...config });
});

2
web/packages/extension/webpack.config.js
View File

@ -18,6 +18,8 @@ module.exports = (env, argv) => {
options: path.resolve(__dirname, "src/options.js"),
content: path.resolve(__dirname, "src/content.js"),
ruffle: path.resolve(__dirname, "src/ruffle.js"),
background: path.resolve(__dirname, "src/background.js"),
player: path.resolve(__dirname, "src/player.js"),
},
output: {
path: path.resolve(__dirname, "assets/dist/"),