A small Chrome Extension for MoneyForward. This extension allows you to show budget progress on MF monthly balance page.

index.js

window.onload = function () {
  var monthlyPage = document.getElementById('page-monthly');
  var budgetPage = document.getElementById('page-spending-targets');

  // On spending page
  if (budgetPage) {
    var data = {}, total = 0, cname;
    var cids = [3,10,11,12,13,14,15,20,21,4,5,6,7,8,9];

    document.getElementsByClassName('budget_form')[0].onsubmit = function () {
      for (var i in cids) {
        cname = document.querySelectorAll('.large_category[data-id="' + cids[i] + '"] > th')[0].textContent;
        data[cname] = +document.getElementById('spending_targets_amount_' + cids[i]).value;
        total += data[cname];
      }
      chrome.storage.sync.set({
        'mfBudgetData': data,
        'mfBudgetTotal': total
      }, function() {});
      console.log('Budget saved: ' + total);
    };
  }

  // On monthly page
  if (monthlyPage) {
    chrome.storage.sync.get(null, function (data) {
      var monthlyTable = document.getElementById('monthly_list');
      var inRow = monthlyTable.getElementsByClassName('in')[0];
      var i = 0, j = 0, b = 0, c = 0, d = 0, ts = [];

      if (data.mfBudgetTotal > 0) {
        var bgtRowHtml = '<tr class="bgt"><td class="item">予算</td>';
        for (i = 0; i < 6; i++) {
          bgtRowHtml += '<td class="number">' + data.mfBudgetTotal.toLocaleString() + '円</td>';
        }
        bgtRowHtml += '</tr>';
        inRow.insertAdjacentHTML('afterend', bgtRowHtml);

        var outs = monthlyTable.getElementsByClassName('out');
        for (i = 0; i < outs.length; i++) {
          var cname = outs[i].getElementsByClassName('item')[0].textContent;
          var onumbers = outs[i].getElementsByClassName('number');
          var col = '#000';

          for (j = 0; j < onumbers.length; j++) {
            b = data.mfBudgetData[cname];
            n = +onumbers[j].textContent.replace(/[^\d]/g, '');
            if (i == 0) ts[j] = 0;
            if (b >= 0 && n != NaN) {
              d = b - n;
              ts[j] += d;
              col = d < 0 ? '#f9c2bd' : '#9edc6f';
              onumbers[j].insertAdjacentHTML('beforeend', '<span style="display:block;color:'+col+';font-size:.8em">(' + d.toLocaleString() + '円)</span>');
            }
          }
        }

        var tnumbers = monthlyTable.getElementsByClassName('total')[0].getElementsByClassName('number');
        for (i = 0; i < tnumbers.length; i++) {
          if (ts[i] != NaN) {
            tnumbers[i].insertAdjacentHTML('beforeend', '<span style="display:block;font-size:.8em">(' + ts[i].toLocaleString() + '円)</span>');
          }
        }
      }
    });
  }
};

manifest.json

{
  "name": "MF Budget Injector",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "This extension allows you to show budget progress on MF monthly balance page.",
  "permissions": [
    "storage",
    "https://moneyforward.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://moneyforward.com/spending_targets/edit",
        "https://moneyforward.com/cf/monthly"
      ],
      "js": [
        "index.js"
      ]
    }
  ]
}