Marketplace 排序上架日期控制面板
// ==UserScript==
// @name FB Marketplace Item Sort
// @namespace http://tampermonkey.net/
// @icon https://www.facebook.com/favicon.ico
// @version 2025-09-24.2
// @description Marketplace 排序上架日期控制面板
// @author Henrik
// @match *://www.facebook.com/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
const PANEL_ID = 'marketplace-control-panel';
const COLLAPSE_KEY = PANEL_ID + '-collapsed';
let panel = null;
let container = null;
// ---------- 建立控制面板 ----------
function createPanel() {
if (panel) return;
panel = document.createElement('div');
panel.id = PANEL_ID;
panel.style.position = 'fixed';
panel.style.top = '80px';
panel.style.right = '20px'; // 固定在右側
panel.style.zIndex = '9999';
panel.style.width = '220px';
panel.style.background = 'rgba(255,255,255,0.97)';
panel.style.border = '1px solid #ddd';
panel.style.borderRadius = '8px';
panel.style.boxShadow = '0 4px 10px rgba(0,0,0,0.2)';
panel.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Arial';
panel.style.fontSize = '14px';
panel.style.color = '#111';
// 標題列
const titleBar = document.createElement('div');
titleBar.style.display = 'flex';
titleBar.style.justifyContent = 'space-between';
titleBar.style.alignItems = 'center';
titleBar.style.padding = '4px 6px';
titleBar.style.background = '#f3f3f3';
titleBar.style.fontWeight = '600';
const title = document.createElement('div');
title.textContent = 'Marketplace 排序';
const toggleBtn = document.createElement('button');
toggleBtn.textContent = '－';
toggleBtn.style.border = 'none';
toggleBtn.style.cursor = 'pointer';
toggleBtn.style.fontSize = '16px';
toggleBtn.style.lineHeight = '1';
toggleBtn.style.padding = '0 6px';
titleBar.appendChild(title);
titleBar.appendChild(toggleBtn);
panel.appendChild(titleBar);
// 控制項容器
container = document.createElement('div');
container.style.padding = '8px';
const controls = [
{
label: '排序方式',
param: 'sortBy',
type: 'select',
options: [
{ text: '推薦', value: 'best_match' },
{ text: '從近到遠', value: 'distance_ascend' },
{ text: '由新到舊', value: 'creation_time_descend' },
{ text: '價格低至高', value: 'price_ascend' },
{ text: '價格高至低', value: 'price_descend' }
]
},
{
label: '上架日期（天）',
param: 'daysSinceListed',
type: 'select',
options: [
{ text: '不限', value: '' },
...Array.from({ length: 30 }, (_, i) => ({ text: `${i + 1} 天內`, value: `${i + 1}` }))
]
}
];
const inputs = {};
controls.forEach(ctrl => {
const label = document.createElement('label');
label.textContent = ctrl.label;
label.style.fontWeight = '500';
container.appendChild(label);
if (ctrl.type === 'select') {
const select = document.createElement('select');
select.style.width = '100%';
select.style.padding = '6px';
select.style.borderRadius = '6px';
select.style.border = '1px solid #ccc';
select.style.fontSize = '13px';
ctrl.options.forEach(opt => {
const o = document.createElement('option');
o.value = opt.value;
o.textContent = opt.text;
select.appendChild(o);
});
container.appendChild(select);
inputs[ctrl.param] = select;
}
});
panel.appendChild(container);
document.body.appendChild(panel);
// 初始化 URL 參數
try {
const url = new URL(window.location.href);
controls.forEach(ctrl => {
const val = url.searchParams.get(ctrl.param);
if (val !== null && inputs[ctrl.param]) inputs[ctrl.param].value = val;
});
} catch (e) {
console.warn('URL 解析失敗', e);
}
// select 改變即更新 URL 並刷新頁面
function updateURL() {
try {
const newUrl = new URL(window.location.href);
Object.entries(inputs).forEach(([param, el]) => {
const value = el.value;
if (value) newUrl.searchParams.set(param, value);
else newUrl.searchParams.delete(param);
});
window.location.href = newUrl.toString();
} catch (e) {
console.error('更新 URL 失敗', e);
}
}
Object.values(inputs).forEach(el => el.addEventListener('change', updateURL));
// ---------- 收合/展開 ----------
function setCollapsed(collapsed) {
if (collapsed) {
container.style.display = 'none';
panel.style.width = '160px';
toggleBtn.textContent = '+';
} else {
container.style.display = 'block';
panel.style.width = '220px';
toggleBtn.textContent = '－';
}
localStorage.setItem(COLLAPSE_KEY, collapsed ? '1' : '0');
}
toggleBtn.addEventListener('click', () => {
const isCollapsed = container.style.display !== 'none';
setCollapsed(isCollapsed);
});
const savedCollapsed = localStorage.getItem(COLLAPSE_KEY);
if (savedCollapsed === '1') setCollapsed(true);
}
function removePanel() {
const p = document.getElementById(PANEL_ID);
if (p) p.remove();
panel = null;
}
// ---------- 判斷是否顯示 ----------
function checkPanelVisibility() {
const isMarketplacePage = !!window.location.pathname.match(/\/marketplace/);
const isItemPage = window.location.pathname.includes('/item');
if (isItemPage || !isMarketplacePage) {
if (panel) removePanel();
} else {
if (!panel) createPanel();
}
}
// ---------- SPA 導航支援 ----------
(function () {
const wrapHistory = function (type) {
const orig = history[type];
return function () {
const rv = orig.apply(this, arguments);
setTimeout(checkPanelVisibility, 300);
return rv;
};
};
history.pushState = wrapHistory('pushState');
history.replaceState = wrapHistory('replaceState');
window.addEventListener('popstate', () => setTimeout(checkPanelVisibility, 300));
})();
// 初始檢查
checkPanelVisibility();
})();